qu’est-ce que -webkit-transform: translate3d (0,0,0); exactement faire? Appliquer sur le corps?

qu’est-ce que -webkit-transform: translate3d(0,0,0); exactement faire? At-il des problèmes de performance? Dois-je simplement l’appliquer au corps ou à des éléments individuels? Il semble améliorer considérablement les événements de défilement.

Merci pour la leçon!

-webkit-transform: translate3d(0,0,0); fait que certains appareils exécutent leur accélération matérielle.

Une bonne lecture se trouve ici

Les applications natives peuvent accéder à l’unité de traitement graphique (GPU) du périphérique pour 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 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.

Utiliser -webkit-transform: translate3d(0,0,0); va lancer le GPU en action pour les transitions CSS, les rendant plus fluides (FPS plus élevé).

Note: translate3d(0,0,0) ne fait rien en termes de ce que vous voyez. il déplace l’object de 0px dans les axes x, y et z. C’est seulement une technique pour forcer l’accélération matérielle.


Une alternative est -webkit-transform: translateZ(0) . Et si Chrome et Safari clignotent à cause de transformations, essayez -webkit-backface-visibility: hidden et -webkit-perspective: 1000 . Pour plus d’informations, reportez-vous à cet article .

Je n’ai pas vu de réponse ici qui explique cela. Beaucoup de transformations peuvent être effectuées en calculant chaque div et ses options en utilisant un ensemble compliqué de validation. Cependant, si vous utilisez une fonction 3D, chacun des éléments 2D que vous avez est considéré comme un élément 3D et nous pouvons effectuer une transformation de masortingce sur ces éléments à la volée. Cependant, la plupart des éléments sont déjà “techniquement” accélérés par le matériel car ils utilisent tous le GPU. Mais, les transformations 3D fonctionnent directement sur les versions mises en cache de chacun de ces rendus 2D (ou les versions en cache du div ) et utilisent directement une transformation masortingcielle (qui sont des mathématiques FP vectorisées et parallélisées).

Il est important de noter que la 3D transforme UNIQUEMENT les modifications apscopes aux entités sur une div 2D en cache (en d’autres termes, la div est déjà une image rendue). Ainsi, les choses comme changer la largeur et la couleur des bordures ne sont plus “3D” pour parler vaguement. Si vous y réfléchissez, la modification de la largeur des bordures nécessite de réexécuter le div car et de le remettre en cache pour que les transformations 3D puissent être appliquées.

J’espère que cela a du sens et laissez-moi savoir si vous avez d’autres questions.

Pour répondre à votre question, translate3d: 0x 0y 0z ne ferait rien puisque les transformations fonctionnent directement sur la texture formée en exécutant les sumts du div dans le shader du GPU. Cette ressource de shader est maintenant mise en cache et une masortingce sera appliquée lors du dessin sur le tampon de trame. Donc, fondamentalement, cela ne présente aucun avantage.

Voici comment le navigateur fonctionne en interne.

Étape 1: parsing d’entrée

 

Étape 2: Développer une couche composite

 CompositeLayer compLayer = new CompositeLayer(); compLayer.setPosition(0, 0, 0, 0); compLayer.setPositioning(ABSOLUTE); // Note. this is psuedocode. The actual code Pipeline.add(compLayer, zIndex); // would be significantly more complex. 

Étape 3: Rendu de la couche composite

 for (CompositeLayer compLayer : allCompositeLayers){ // Create and set cacheTexture as active target Texture2D cacheTexture = new Texture2D(); cacheTexture.setActive(); // Draw to cachedTexture Pipeline.renderVertices(compLayer.getVertices()); Pipeline.setTexture(compLayer.getBackground()); Pipeline.drawIndexed(compLayer.getVertexCount()); // Set the framebuffer as active target frameBuffer.setActive(); // Render to framebuffer from texture and **applying transformMasortingx** Pipeline.renderFromCache(cacheTexture, transformMasortingx); } 

Il y a un bug avec le défilement dans MobileSafary (iOS 5) qui conduit à l’apparition d’artefacts en tant que copies d’éléments d’entrée dans le conteneur défilant.

Utiliser translate3d pour chaque élément enfant peut corriger ce bogue étrange. Voici un exemple de CSS qui a sauvé la journée pour moi.

 .scrolling-container { overflow: auto; -webkit-overflow-scrolling: touch; } .scrolling-container .child-element { position: relative; -webkit-transform: translate3d(0,0,0); } 

Translate3D force l’accélération matérielle Les animations, transformations et transitions .CSS ne sont pas automatiquement accélérées par le processeur graphique , mais s’exécutent à partir du moteur de rendu logiciel plus lent du navigateur. Pour utiliser le GPU, nous utilisons translate3d

Actuellement, les navigateurs tels que Chrome, FireFox, Safari, IE9 + et la dernière version d’Opera sont tous accompagnés d’une accélération matérielle, ils ne l’utilisent que lorsqu’ils indiquent qu’un élément DOM pourrait en bénéficier.

Sachez que cela crée un contexte d’emstackment (plus ce que les autres réponses ont dit), donc cela a potentiellement un effet sur ce que vous voyez, par exemple faire apparaître quelque chose sur une incrustation quand elle n’est pas supposée l’être.