Performances CSS par rapport à translateZ (0)

Un certain nombre de blogs ont exprimé le gain de performances en «trompant» le GPU pour lui faire croire 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);
}

Les transformations CSS créent un nouveau contexte d'empilement et un bloc contenant, comme décrit dans la spécification. En anglais simple, cela signifie que les éléments à position fixe auxquels une transformation leur est appliquée agiront davantage comme des éléments positionnés de manière absolue et que les z-indexvaleurs risquent d'être vissées.

Si vous regardez cette démo , vous verrez ce que je veux dire. Le deuxième div a une transformation qui lui est appliquée, ce qui signifie qu'il crée un nouveau contexte d'empilement, et les pseudo éléments sont empilés au-dessus plutôt qu'en 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 une autre façon d'exploiter l'accélération 3D sans créer ces problèmes, mais cela ne fonctionne que dans Safari.

Si vous voulez des implications, dans certains scénarios, les performances de Google Chrome sont horribles avec l'accélération matérielle activée . Curieusement, changer le "truc" pour -webkit-transform: rotateZ(360deg);fonctionner très bien.

Je ne crois pas que nous ayons jamais compris pourquoi.

Cela oblige le navigateur à utiliser l'accélération matérielle pour accéder à l'unité de traitement graphique (GPU) de l'appareil afin de faire voler les pixels. Les applications Web, en revanche, fonctionnent dans le contexte du navigateur, ce qui permet au logiciel de faire la plupart (sinon la totalité) du rendu, ce qui réduit la puissance des transitions. Mais le Web a rattrapé son retard et la plupart des éditeurs de navigateurs fournissent désormais une accélération matérielle graphique au moyen de règles CSS particulières.

L'utilisation -webkit-transform: translate3d(0,0,0);mettra le GPU en action pour les transitions CSS, les rendant plus fluides (FPS plus élevés).

Remarque: translate3d(0,0,0) ne fait rien par rapport à 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 cela -webkit-transform: translate3d(0, 0, 0);va gâcher la nouvelle position: -webkit-sticky;propriété. Avec un modèle de navigation dans le tiroir gauche sur lequel je travaillais, l'accélération matérielle que je voulais avec la propriété de transformation perturbait le positionnement fixe de ma barre de navigation supérieure. J'ai désactivé la transformation et le positionnement a bien fonctionné.

Heureusement, je semble avoir déjà eu une accélération matérielle, parce que j'avais -webkit-font-smoothing: antialiasedsur l'élément html. Je testais ce comportement sous iOS7 et Android.

Sur les appareils mobiles, tout envoyer au GPU entraînera une surcharge de mémoire et plantera l'application. J'ai rencontré cela sur une application iPad à Cordova. Il est préférable d'envoyer uniquement les éléments requis au GPU, les divs que vous déplacez spécifiquement.

Mieux encore, utilisez les transitions de transitions 3D pour faire les animations comme translateX (50px) par opposition à gauche: 50px;