Rendimiento de CSS relativo a translateZ (0)

Varios blogs han expresado la ganancia de rendimiento al "engañar" a la GPU para que piense que un elemento es 3D al usarlo transform: translateZ(0)para acelerar animaciones y transiciones. Me preguntaba si hay implicaciones al usar esta transformación de la siguiente manera:

* {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

Las transformaciones CSS crean un nuevo contexto de apilamiento y un bloque contenedor, como se describe en la especificación. En términos sencillos, esto significa que los elementos de posición fija con una transformación aplicada actuarán más como elementos absolutamente posicionados, y z-indexes probable que los valores se confundan.

Si echas un vistazo a esta demostración , verás lo que quiero decir. El segundo div tiene una transformación aplicada, lo que significa que crea un nuevo contexto de apilamiento, y los pseudo elementos se apilan en la parte superior en lugar de debajo.

Entonces, básicamente, no hagas eso. Aplique una transformación 3D solo cuando necesite la optimización. -webkit-font-smoothing: antialiased;es otra forma de aprovechar la aceleración 3D sin crear estos problemas, pero solo funciona en Safari.

Si desea implicaciones, en algunos escenarios, el rendimiento de Google Chrome es horrible con la aceleración de hardware habilitada . Por extraño que parezca, cambiar el "truco" a -webkit-transform: rotateZ(360deg);funcionó bien.

No creo que nunca supiéramos por qué.

Obliga al navegador a utilizar la aceleración de hardware para 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 0px en los ejes x, y y z. Es solo una técnica para forzar la aceleración del hardware.

Buena lectura aquí: http://www.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/

Puedo dar fe del hecho de que -webkit-transform: translate3d(0, 0, 0);afectará a la nueva position: -webkit-sticky;propiedad. Con un patrón de navegación del cajón izquierdo en el que estaba trabajando, la aceleración de hardware que quería con la propiedad de transformación estaba alterando la posición fija de mi barra de navegación superior. Apagué la transformación y el posicionamiento funcionó bien.

Afortunadamente, parece que ya tenía activada la aceleración de hardware, porque tenía -webkit-font-smoothing: antialiasedel elemento html. Estaba probando este comportamiento en iOS7 y Android.

En dispositivos móviles, enviar todo a la GPU provocará una sobrecarga de memoria y bloqueará la aplicación. Encontré esto en una aplicación para iPad en Cordova. Lo mejor es enviar solo los elementos necesarios a la GPU, los divs que está moviendo específicamente.

Mejor aún, use las transformaciones de transiciones 3d para hacer las animaciones como translateX (50px) en lugar de left: 50px;