Performance CSS relative à translateZ(0)
un certain nombre de blogs ont exprimé le gain de performance en" trompant "le GPU de penser qu'un élément est 3D en utilisant transform: translateZ(0) pour accélérer les animations et les transitions. Je me demandais s'il y avait des implications à utiliser cette transformation de la manière suivante:
* {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
5 réponses
les transformations CSS créer un nouveau contexte d'empilement et qui contient un bloc, comme décrit dans la spec. en anglais simple, cela signifie que les éléments de position fixe avec une transformation appliquée à eux agiront plus comme des éléments absolument positionnés, et les valeurs z-index sont susceptibles de se visser avec.
si vous regardez cette démo , vous verrez ce que je veux dire. Le deuxième div a une transformation appliquée à c'est à dire qu'il crée un nouveau contexte d'empilement, et les pseudo-éléments sont empilés sur le dessus plutôt qu'en dessous.
donc en gros, ne fais pas ça. N'appliquez une transformation 3D que si vous avez besoin d'une optimisation. -webkit-font-smoothing: antialiased; est une autre façon d'exploiter L'accélération 3D sans créer ces problèmes, mais cela ne fonctionne qu'en Safari.
si vous voulez des implications, dans certains scénarios, les performances de Google Chrome est horrible avec l'accélération matérielle activé . Assez curieusement, changer le " truc "en -webkit-transform: rotateZ(360deg); a très bien fonctionné.
Je ne crois pas qu'on ait jamais compris pourquoi.
il oblige le navigateur à utiliser l'accélération matérielle pour accéder à L'Unité de traitement graphique de l'appareil (GPU) pour faire voler les pixels. Les applications Web, d'autre part, fonctionnent dans le contexte du navigateur, qui laisse le logiciel faire la plupart (si pas la totalité) du rendu, ce qui entraîne moins de puissance pour les transitions. Mais le Web a rattrapé son retard, et la plupart des fournisseurs de navigateur fournissent maintenant l'accélération matérielle graphique au moyen de règles CSS particulières.
à l'Aide de -webkit-transform: translate3d(0,0,0); va lancer le GPU en action pour les transitions CSS, les rendant plus lisses (FPS plus élevés).
Note: translate3d(0,0,0) ne fait rien en termes de ce que vous voyez. Il déplace l'objet de 0px dans les axes x,y et Z. Ce n'est qu'une technique pour forcer l'accélération matérielle.
bonne lecture ici: http://www.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css /
je peux attester du fait que -webkit-transform: translate3d(0, 0, 0); va nuire à la nouvelle propriété position: -webkit-sticky; . Avec un modèle de navigation dans le tiroir de gauche sur lequel je travaillais, l'accélération matérielle que je voulais avec la propriété transform perturbait le positionnement fixe de ma barre nav supérieure. J'ai éteint la transformation et le positionnement a bien fonctionné.
heureusement, il semble que j'ai déjà eu une accélération matérielle sur, parce que j'ai eu -webkit-font-smoothing: antialiased sur l'élément html. J'ai été tester ce comportement dans iOS7 et Android.
sur les appareils mobiles l'envoi de tout au GPU causera une surcharge de mémoire et écrasera l'application. J'ai trouvé ça sur une application iPad à Cordova. Il est préférable de n'envoyer que les articles requis au GPU, les divs que vous déplacez spécifiquement.
mieux encore, utilisez la 3d transitions transforme pour faire les animations comme translateX (50px) par opposition à gauche: 50px;