Performances CSS par rapport à translateZ (0)

96

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);
}
Ahmed Nuaman
la source
6
pouvez-vous créer un lien vers ces articles de blog?
Jürgen Paul
@PineappleUndertheSea celui-ci: blog.teamtreehouse.com/ ... m'a envoyé ici.
Btw, -o-transform: translateZ(0)n'a jamais été une chose. caniuse.com/#search=translate3d
Volker E.
@Ahmed Nuaman oui ce n'est pas seulement un truc. Mais il est officiellement utilisé dans certaines applications. Mais si vous vous retrouvez sur un appareil (bas de gamme) sans GPU ... Je ne sais pas comment il fonctionne. Mais puisque si ce qu'un processeur peut faire (graphiques 2D) est délégué au GPU pour la seule raison qu'il y a une commande 3D bien que cela n'ait pas d'impact final. Et la 3D utilise plusieurs cœurs à l'intérieur et fonctionne plus rapidement. C'est ce qui a du sens ici. Needs some more investigation ...
TooGeeky

Réponses:

102

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.

Dan Eden
la source
27

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.

ov
la source
3
J'ai eu des problèmes comme des images compressées et des animations horriblement fausses en utilisant max-height dans Safari 5 et 6. Quand j'ai désactivé l'accélération GPU (translateZ (0)), tout fonctionnait comme prévu, mais l'animation n'était pas assez fluide. J'ai changé translateZ (0) en rotateZ (360deg), et soudain, les animations étaient fluides et le matériel accéléré et il n'y avait plus de problèmes.
jakub_jo
14

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/

Néo
la source
7

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.

J. Hogue
la source
5

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;

Poiré
la source
1
Vouliez-vous dire "utiliser les transformations 3D" au lieu de "utiliser les transitions 3D"?
Isius