Desempenho de CSS em relação a translateZ (0)

Vários blogs expressaram o ganho de desempenho em 'enganar' a GPU para pensar que um elemento é 3D usando transform: translateZ(0)para acelerar animações e transições. Eu queria saber se há implicações em usar essa transformação da seguinte maneira:

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

As transformações CSS criam um novo contexto de empilhamento e bloco de contenção, conforme descrito nas especificações. Em linguagem simples, isso significa que os elementos de posição fixa com uma transformação aplicada a eles agirão mais como elementos absolutamente posicionados, e os z-indexvalores provavelmente serão confundidos.

Se você der uma olhada nesta demonstração , verá o que quero dizer. O segundo div tem uma transformação aplicada a ele, o que significa que ele cria um novo contexto de empilhamento e os pseudo elementos são empilhados na parte superior e não abaixo.

Então, basicamente, não faça isso. Aplique uma transformação 3D apenas quando precisar de otimização. -webkit-font-smoothing: antialiased;é outra maneira de explorar a aceleração 3D sem criar esses problemas, mas só funciona no Safari.

Se você deseja implicações, em alguns cenários o desempenho do Google Chrome é horrível com a aceleração de hardware ativada . Curiosamente, mudar o "truque" para -webkit-transform: rotateZ(360deg);funcionar perfeitamente.

Não acredito que alguma vez descobrimos o porquê.

Ele força o navegador a usar aceleração de hardware para acessar a unidade de processamento gráfico (GPU) do dispositivo para fazer os pixels voarem. Os aplicativos da Web, por outro lado, são executados no contexto do navegador, o que permite que o software faça a maior parte (se não toda) da renderização, resultando em menos potência para as transições. Mas a Web está se atualizando e a maioria dos fornecedores de navegadores agora oferece aceleração gráfica de hardware por meio de regras CSS específicas.

Usar -webkit-transform: translate3d(0,0,0);irá colocar a GPU em ação para as transições CSS, tornando-as mais suaves (FPS mais alto).

Nota: translate3d(0,0,0) não faz nada em termos do que você vê. Ele move o objeto em 0 px nos eixos x, y e z. É apenas uma técnica para forçar a aceleração do hardware.

Boa leitura aqui: http://www.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/

Posso atestar o fato de que -webkit-transform: translate3d(0, 0, 0);vai mexer com o novo position: -webkit-sticky;imóvel. Com um padrão de navegação de gaveta esquerda no qual eu estava trabalhando, a aceleração de hardware que eu queria com a propriedade transform estava bagunçando o posicionamento fixo da minha barra de navegação superior. Desliguei a transformação e o posicionamento funcionou bem.

Felizmente, parece que eu já tinha a aceleração de hardware ativada, porque eu tinha -webkit-font-smoothing: antialiasedo elemento html. Eu estava testando esse comportamento no iOS7 e no Android.

Em dispositivos móveis, o envio de tudo à GPU causará uma sobrecarga de memória e travará o aplicativo. Eu encontrei isso em um aplicativo para iPad em Cordova. Melhor enviar apenas os itens necessários para a GPU, os divs que você está movendo especificamente.

Melhor ainda, use as transformações de transições 3D para fazer animações como translateX (50px) em vez de left: 50px;