scale3d - transform translate css

Rendimiento de CSS relativo a translateZ(0)

Question

Varios blogs han expresado el aumento en el rendimiento al "engañar" a la GPU para pensar que un elemento es 3D mediante el uso de transform: translateZ(0) para acelerar las animaciones y las transiciones. Me preguntaba si hay implicaciones para 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);
}

Answer 1

En los 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, use las transiciones de transiciones 3d para hacer las animaciones como translateX (50px) en lugar de a la izquierda: 50px;

Answer 2

Las transformaciones de CSS crean un nuevo contexto de apilamiento y un bloque que contiene, como se describe en la especificación. En inglés simple, esto significa que los elementos de posición fijos 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 echas un vistazo a esta demostración , verás a qué me refiero. 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. 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 3

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 ves. Mueve el objeto por 0px en los ejes x, yyz. Es solo una técnica para forzar la aceleración del hardware.

Bien leído aquí: http://www.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/

Answer 4

Puedo dar fe del hecho de que -webkit-transform: translate3d(0, 0, 0); se position: -webkit-sticky; con 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 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

Si desea implicaciones, en algunos casos, 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 hayamos averiguado por qué.