Varios blogs han expresado la ganancia de rendimiento al "engañar" a la GPU para que piense que un elemento es 3D utilizando transform: translateZ(0) para acelerar las animaciones y transiciones. Me preguntaba cuáles son las implicaciones, si las hay, de aplicar 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 pocas palabras, esto significa que los elementos de posición fija a los que se aplica una transformación se comportarán como elementos de posición absoluta, y z-index los valores son susceptibles de ser jodidos.
Si echa 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 pseudoelementos se apilan encima en lugar de debajo.
Así que, básicamente, no lo hagas. Aplique una transformación 3D sólo cuando necesite la optimización. -webkit-font-smoothing: antialiased; es otra forma de aprovechar la aceleración 3D sin crear estos problemas, pero sólo funciona en Safari.
Si quieres implicaciones, en algunos escenarios el rendimiento de Google Chrome es horrible con la aceleración por hardware activada . Curiosamente, cambiar el "truco" por -webkit-transform: rotateZ(360deg); funcionó bien.
No creo que hayamos averiguado por qué.
Obliga al navegador a utilizar la aceleración por hardware para acceder a la unidad de procesamiento gráfico (GPU) del dispositivo y hacer volar los píxeles. Las aplicaciones web, en cambio, se ejecutan en el contexto del navegador, lo que permite al software realizar la mayor parte (si no toda) la renderización, lo que supone menos potencia para las transiciones. Pero la Web se ha puesto al día, y la mayoría de los proveedores de navegadores ofrecen ahora aceleración gráfica por hardware mediante reglas CSS específicas.
El uso de -webkit-transform: translate3d(0,0,0); pondrá en marcha la GPU para las transiciones CSS, haciéndolas más suaves (mayores FPS).
Nota: translate3d(0,0,0) no hace nada en cuanto a lo que se ve. mueve el objeto en 0px en los ejes x,y y z. Es sólo una técnica para forzar la aceleración por hardware.
Buena lectura aquí: http://www.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/
Puedo dar fe de que -webkit-transform: translate3d(0, 0, 0); se meterá con el nuevo position: -webkit-sticky; propiedad. Con un patrón de navegación de cajón izquierdo en el que estaba trabajando, la aceleración de hardware que quería con la propiedad transform estaba estropeando el posicionamiento fijo de mi barra de navegación superior. Desactivé la transformación y el posicionamiento funcionó bien.
Por suerte, parece que ya tenía activada la aceleración por hardware, porque tenía -webkit-font-smoothing: antialiased en el elemento html. Estuve probando este comportamiento en iOS7 y Android.
En los dispositivos móviles, enviar todo a la GPU provocará una sobrecarga de memoria y bloqueará la aplicación. Me encontré con esto en una aplicación para iPad en Cordova. Lo mejor es enviar a la GPU sólo los elementos necesarios, los divs que se mueven específicamente.
Mejor aún, utilice el 3d transiciones transformaciones para hacer las animaciones como translateX(50px) en lugar de left:50px;
Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.
