qué hace -webkit-transform: translate3d (0,0,0); exactamente hacer? ¿Aplicar al cuerpo?

¿qué hace -webkit-transform: translate3d(0,0,0); exactamente? ¿Tiene problemas de rendimiento? ¿Debería aplicarlo al cuerpo o elementos individuales? Parece mejorar drásticamente los eventos de desplazamiento.

¡Gracias por la lección!

-webkit-transform: translate3d(0,0,0); hace que algunos dispositivos ejecuten su aceleración de hardware.

Una buena lectura se encuentra aquí

Las aplicaciones nativas pueden acceder a la unidad de procesamiento gráfico (GPU) del dispositivo para hacer volar los píxeles. Las aplicaciones web, por otro lado, se ejecutan en el contexto del navegador, lo que permite que el software realice la mayor parte (si no todo) del renderizado, lo que resulta en menos potencia para las transiciones. Pero la Web se ha puesto al día y la mayoría de los proveedores de navegadores ahora ofrecen aceleración de hardware gráfico mediante reglas CSS particulares.

El uso -webkit-transform: translate3d(0,0,0);hará que la GPU entre en acción para las transiciones CSS, haciéndolas más suaves (FPS más alto).

Nota: translate3d(0,0,0) no hace nada en términos de lo que ve. mueve el objeto en 0px en los ejes x, y y z. Es solo una técnica para forzar la aceleración del hardware.

Una alternativa es -webkit-transform: translateZ(0). Y si hay parpadeo en Chrome y Safari debido a las transformaciones, intente -webkit-backface-visibility: hiddeny -webkit-perspective: 1000. Para obtener más información, consulte este artículo .

No vi una respuesta aquí que explique esto. Se pueden realizar muchas transformaciones calculando cada una de las divopciones y sus opciones mediante un complicado conjunto de validaciones. Sin embargo, si usa una función 3D, cada uno de los elementos 2D que tiene se consideran elementos 3D y podemos realizar una transformación matricial en estos elementos sobre la marcha. Sin embargo, la mayoría de los elementos ya están "técnicamente" acelerados por hardware porque todos usan la GPU. Pero, las transformaciones 3D funcionan directamente en las versiones en caché de cada uno de estos renderizados 2D (o versiones en caché de div) y utilizan directamente una transformación de matriz en ellos (que son matemáticas FP vectorizadas y paralelizadas).

Es importante tener en cuenta que las transformaciones 3D SOLO realizan cambios en las características de un div 2D almacenado en caché (en otras palabras, el div ya es una imagen renderizada). Entonces, cosas como cambiar el ancho y el color del borde ya no son "3D" para ser vagamente hablando. Si lo piensa, cambiar los anchos de los bordes requiere que divvuelva a procesar el porque y lo vuelva a guardar para que se puedan aplicar las transformaciones 3D.

Espero que esto tenga sentido y avíseme si tiene más preguntas.

Para responder a su pregunta, translate3d: 0x 0y 0zno haría nada, ya que las transformaciones funcionan directamente sobre la textura que se forma al ejecutar los vértices del divsombreador de GPU. Este recurso de sombreado ahora se almacena en caché y se aplicará una matriz al dibujar en el búfer de fotogramas. Entonces, básicamente no hay ningún beneficio al hacer eso.

Así es como funciona el navegador internamente.

Paso 1: Analizar la entrada

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

Paso 2: Desarrollar la capa compuesta

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.

Paso 3: renderizar la capa compuesta

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);
}

Hay un error con el desplazamiento en MobileSafary (iOS 5) que provoca que aparezcan artefactos como copias de elementos de entrada en el contenedor de desplazamiento.

El uso de translate3d para cada elemento hijo puede corregir ese extraño error. Aquí hay un ejemplo de CSS que me salvó el día.

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

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

Translate3D fuerza la aceleración del hardware. Las animaciones, transformaciones y transiciones de CSS no se aceleran automáticamente por GPU , sino que se ejecutan desde el motor de renderizado de software más lento del navegador. Para usar GPU usamos translate3d

Actualmente, los navegadores como Chrome, FireFox, Safari, IE9 + y la última versión de Opera vienen con aceleración de hardware, solo lo usan cuando tienen una indicación de que un elemento DOM se beneficiaría de él.

Tenga en cuenta que crea un contexto de apilamiento (más lo que dijeron las otras respuestas), por lo que potencialmente tiene un efecto en lo que ve, por ejemplo, hacer que algo aparezca sobre una superposición cuando no se supone que debe hacerlo.