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);
}
performance
css
translate-animation
Ahmed Nuaman
fonte
fonte
-o-transform: translateZ(0)nunca foi uma coisa. caniuse.com/#search=translate3dRespostas:
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.fonte
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ê.
fonte
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/
fonte
Posso atestar o fato de que
-webkit-transform: translate3d(0, 0, 0);vai mexer com o novoposition: -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.fonte
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ções3D para fazer animações como translateX (50px) em vez de left: 50px;fonte