Desempenho CSS relativo ao 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 para 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 contêm bloco, conforme descrito na especificação. Em inglês simples, isso significa que os elementos de posição fixa com uma transformação aplicada a eles agirão mais como elementos posicionados de forma absoluta, e z-index valores do z-index provavelmente serão parafusados.

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 no topo, e não abaixo.

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

Se você quiser implicações, em alguns cenários, o desempenho do Google Chrome é horrível com a aceleração de hardware ativada . Curiosamente, alterando o “truque” para -webkit-transform: rotateZ(360deg); funcionou muito bem.

Eu não acredito que nós já descobrimos o porquê.

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

Usando -webkit-transform: translate3d(0,0,0); vai chutar a GPU em ação para as transições CSS, tornando-as mais suaves (FPS mais altos).

Nota: translate3d(0,0,0) não faz nada em termos do que você vê. Move o object por 0 px no eixo x, y e z. É apenas uma técnica para forçar a aceleração de hardware.

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

Eu posso atestar o fato de que -webkit-transform: translate3d(0, 0, 0); vai mexer com a nova position: -webkit-sticky; propriedade. Com um padrão de navegação na gaveta esquerda em que estava trabalhando, a aceleração de hardware que eu queria com a propriedade transform estava atrapalhando o posicionamento fixo da barra de navegação superior. Eu desliguei a transformação e o posicionamento funcionou bem.

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

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

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