Performances CSS par rapport à translateZ(0)

Question

Un certain nombre de blogs ont fait part du gain de performance obtenu en " trompant " le GPU pour qu'il pense qu'un élément est en 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);
}

Answer 1

Les transformations CSS créent un nouveau contexte d'empilement et un nouveau bloc contenant, comme décrit dans la rubrique la spécification. En clair, cela signifie que les éléments à position fixe auxquels est appliquée une transformation se comporteront davantage comme des éléments à position absolue, et que z-index sont susceptibles d'être bafouées.

Si vous jetez un coup d'œil à cette démo vous verrez ce que je veux dire. Une transformation est appliquée à la deuxième div, ce qui signifie qu'elle crée un nouveau contexte d'empilement et que les pseudo-éléments sont empilés au-dessus plutôt qu'au-dessous.

Donc, en gros, ne faites pas ça. Appliquez une transformation 3D uniquement lorsque vous avez besoin de l'optimisation. -webkit-font-smoothing: antialiased; est un autre moyen d'exploiter l'accélération 3D sans créer ces problèmes, mais il ne fonctionne que dans Safari.

Answer 2

Si vous voulez des implications, dans certains scénarios, la performance de Google Chrome est horrible avec l'accélération matérielle activée . Bizarrement, changer le "truc" en -webkit-transform: rotateZ(360deg); a bien fonctionné.

Je ne crois pas que nous ayons jamais compris pourquoi.

Answer 3

Il oblige le navigateur à utiliser l'accélération matérielle pour accéder à l'unité de traitement graphique (GPU) de l'appareil et faire voler les pixels. Les applications Web, quant à elles, s'exécutent dans le contexte du navigateur, ce qui permet au logiciel d'effectuer la majeure partie (voire la totalité) du rendu, ce qui réduit la puissance des transitions. Mais le Web a rattrapé son retard et la plupart des fournisseurs de navigateurs proposent désormais une accélération matérielle graphique au moyen de règles CSS particulières.

Utilisation de -webkit-transform: translate3d(0,0,0); mettra le GPU en action pour les transitions CSS, les rendant plus fluides (plus de FPS).

Note : translate3d(0,0,0) ne fait rien en termes de ce que vous voyez. Il déplace l'objet de 0px sur les axes x, y et z. C'est seulement 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/

Answer 4

Je peux attester du fait que -webkit-transform: translate3d(0, 0, 0); va perturber le nouveau position: -webkit-sticky; propriété. Dans le cas d'un modèle de navigation à tiroir gauche sur lequel je travaillais, l'accélération matérielle que je souhaitais obtenir avec la propriété Transform perturbait le positionnement fixe de ma barre de navigation supérieure. J'ai désactivé la transformation et le positionnement a bien fonctionné.

Heureusement, il semble que j'avais déjà activé l'accélération matérielle, car j'avais -webkit-font-smoothing: antialiased sur l'élément html. Je testais ce comportement dans iOS7 et Android.

Answer 5

Sur les appareils mobiles, le fait de tout envoyer au GPU entraînera une surcharge de la mémoire et fera planter l'application. J'ai rencontré ce problème sur une application iPad en Cordova. Le mieux est de n'envoyer que les éléments nécessaires au GPU, les divs que vous déplacez spécifiquement.

Mieux encore, utilisez le 3d transitions des transformations pour faire les animations comme translateX(50px) plutôt que left:50px ;