Que fait -webkit-transform : translate3d(0,0,0) ; exactement ? S'applique-t-il au corps ?

Question

Que fait -webkit-transform: translate3d(0,0,0); font exactement ? A-t-il des problèmes de performance ? Devrais-je l'appliquer uniquement au corps ou à des éléments individuels ? Il semble améliorer considérablement les événements de défilement.

Merci pour la leçon !

Answer 1

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

Une bonne lecture se trouve Aquí

Les applications natives peuvent accéder à l'unité de traitement graphique de l'appareil. (GPU) de l'appareil pour faire voler les pixels. Les applications Web, quant à elles, s'exécutent dans le contexte du navigateur. dans le contexte du navigateur, ce qui permet au logiciel d'effectuer la plupart (sinon la totalité) du rendu, de l'affichage et de la lecture. la plupart (sinon la totalité) du rendu, ce qui se traduit par une puissance moindre pour les transitions. Mais le Web a rattrapé son retard, et la plupart des fournisseurs de navigateurs proposent maintenant l'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 dans les axes x, y et z. C'est seulement une technique pour forcer l'accélération matérielle.

Answer 2

Je n'ai pas vu de réponse ici qui explique cela. Beaucoup de transformations peuvent être faites en calculant chacune des div et ses options en utilisant un ensemble compliqué de validation. Toutefois, 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 opération de validation. transformation de la matrice sur ces éléments à la volée. Cependant, la plupart des éléments sont "techniquement" déjà 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 sur les versions mises en cache de l'élément div ) et utiliser directement une transformation matricielle sur eux (qui sont vectorisés et parallélisés par les maths FP).

Il est important de noter que les transformations 3D ne modifient QUE les caractéristiques d'un div 2D mis en cache (en d'autres termes, le div est déjà une image rendue). Ainsi, des choses comme la modification de la largeur et de 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 un nouveau rendu de l'image de la div. div car et le recache pour que les transformations 3D puissent être appliquées.

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

Pour répondre à votre question, translate3d: 0x 0y 0z ne ferait rien puisque les transformations travaillent directement sur la texture qui est formée par la course des sommets de l'objet div dans le shader du GPU. Cette ressource de shader est maintenant mise en cache et une matrice sera appliquée lors du dessin sur le frame buffer. Donc, fondamentalement, il n'y a aucun avantage à faire cela.

C'est ainsi que le navigateur fonctionne en interne.

Étape 1 : analyser l'entrée

<div style = "position:absolute;left:0;right:0;bottom:0;top:0;"></div>

Étape 2 : Développer la 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 du calque 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 transformMatrix**
     Pipeline.renderFromCache(cacheTexture, transformMatrix);
}

PS : C'est ainsi que le moteur de rendu des navigateurs fonctionne généralement.

Answer 3

Il y a un bogue avec le défilement dans MobileSafary (iOS 5) qui conduit à l'apparition d'artefacts comme des copies d'éléments d'entrée dans le conteneur de défilement.

Utilisation de traduire3d pour chaque élément enfant peut corriger ce bogue étrange. Voici un exemple de CSS qui m'a sauvé la mise.

.scrolling-container {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

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

Answer 4

Translate3D forces accélération matérielle Les animations, les transformations et les transitions .CSS ne sont pas automatiquement GPU Afin d'utiliser le GPU, nous utilisons translate3d, un moteur de rendu logiciel plus lent.

Actuellement, les navigateurs comme Chrome, FireFox, Safari, IE9+ et la dernière version d'Opera sont tous dotés de l'accélération matérielle, mais ils ne l'utilisent que lorsqu'ils ont une indication qu'un élément du DOM pourrait en bénéficier.