web-dev-qa-db-fra.com

Performances CSS relatives à translateZ (0)

Un certain nombre de blogs ont exprimé le gain de performances obtenu en incitant le GPU à penser 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);
}
cssperformancecss3translate-animation
91
Ahmed Nuaman

Les transformations CSS créent un nouveau contexte d'empilement et un bloc contenant, comme décrit dans the spec. En clair, cela signifie que les éléments à position fixe auxquels une transformation a été appliquée agissent davantage comme des éléments à positionnement absolu, et z-index Les valeurs risquent de se faire avoir.

Si vous regardez cette démo , vous verrez ce que je veux dire. Une seconde transformation est appliquée à la seconde div, ce qui signifie qu’elle crée un nouveau contexte d’empilement et que les pseudo-éléments sont empilés sur le dessus plutôt que sur le dessous.

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

95
Dan Eden

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

Je ne crois pas que nous ayons jamais compris pourquoi.

25
o.v.

Il oblige le navigateur à utiliser l'accélération matérielle pour accéder à l'unité de traitement graphique (GPU) du périphérique afin de faire voler les pixels. Les applications Web, quant à elles, fonctionnent dans le contexte du navigateur, ce qui permet au logiciel d’effectuer la plupart (sinon la totalité) du rendu, ce qui réduit la puissance des transitions. Mais le Web est en train de rattraper 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 de -webkit-transform: translate3d(0,0,0); lance le GPU en action pour les transitions CSS, ce qui les rend plus fluides (FPS plus élevé).

Remarque: 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. 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/

14
Neo

Je peux attester du fait que -webkit-transform: translate3d(0, 0, 0); va jouer avec le nouveau position: -webkit-sticky; propriété. Avec le motif de navigation du tiroir gauche sur lequel je travaillais, l'accélération matérielle que je souhaitais avec la propriété de transformation affectait 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 déjà que l'accélération matérielle soit active, car j'avais -webkit-font-smoothing: antialiased sur l'élément html. Je testais ce comportement dans iOS7 et Android.

7
J. Hogue

Sur les appareils mobiles, tout envoyer au GPU causera une surcharge de mémoire et plantera l’application. J'ai rencontré cela sur une application iPad à Cordoue. 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 la 3d transitions transforme pour faire les animations comme translateX (50px) par opposition à left: 50px;

5
Perry