Rendimiento de CSS relativo a translateZ (0)

Question

Varios blogs han expresado la ganancia de rendimiento en 'engañar' a la GPU para pensar que un elemento es 3D usando transform: translateZ(0) para acelerar las animaciones y las transiciones. Estaba pregunto cuáles son las consecuencias, en su caso, de la aplicación de esta transformación en la siguiente forma:

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

Answer 1

transformaciones CSS crear un nuevo contexto de pila y el bloque de contención, como se describe en the spec. En la llanura Inglés, esto significa que fija los elementos de posición con una transformación aplicada a ellos actuarán más como elementos absolutamente posicionados, y es probable que los valores de z-index se atornillen.

Si echa un vistazo a this demo, verá 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.

Así que, básicamente, no hagas eso. Aplica una transformación 3D solo cuando necesites 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.

Answer 2

Si quiere implicaciones, in some scenarios Google Chrome performance is horrible with hardware acceleration enabled. Por extraño que parezca, cambiar el "truco" a -webkit-transform: rotateZ(360deg); funcionó bien.

No creo que hayamos averiguado por qué.

Answer 3

En dispositivos móviles enviar todo a la GPU causará una sobrecarga de memoria y bloqueará la aplicación. Me encontré con esto en una aplicación de iPad en Córdoba. Lo mejor es enviar solo los elementos requeridos a la GPU, los divs que estás moviendo específicamente.

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

Answer 4

Puedo dar fe del hecho de que -webkit-transform: translate3d(0, 0, 0); se mezclará con la nueva propiedad position: -webkit-sticky;. 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 jugando con el posicionamiento fijo de mi barra de navegación superior. Apagué la transformación y el posicionamiento funcionó bien.

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

Answer 5

Obliga al navegador a utilizar la aceleración de hardware para acceder a la unidad de procesamiento gráfico (GPU) del dispositivo para hacer que los píxeles vuelen. Las aplicaciones web, por otro lado, se ejecutan en el contexto del navegador, lo que permite que el software haga la mayoría (si no todas) de la representación, lo que resulta en menos caballos de fuerza 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 gráfica de hardware mediante reglas de CSS particulares.

Usando -webkit-transform: translate3d (0,0,0); pondrá en marcha la GPU en acción para las transiciones CSS, haciéndolas más suaves (FPS más altas).

Nota: translate3d (0,0,0) no hace nada en términos de lo que ve. mueve el objeto por 0px en los ejes x, yyz. 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/