o que -webkit-transform: translate3d (0,0,0); exatamente fazer? Aplicar ao corpo?

o que -webkit-transform: translate3d(0,0,0); exatamente faz? Tem algum problema de desempenho? Devo apenas aplicá-lo ao corpo ou aos elementos individuais? Parece melhorar drasticamente os eventos de rolagem.

Obrigado pela lição!

-webkit-transform: translate3d(0,0,0); faz com que alguns dispositivos executem sua aceleração de hardware.

Uma boa leitura é encontrada aqui

Os aplicativos nativos podem 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 (senã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.

Uma alternativa é -webkit-transform: translateZ(0). E se houver oscilação no Chrome e no Safari devido às transformações, tente -webkit-backface-visibility: hiddene -webkit-perspective: 1000. Para obter mais informações, consulte este artigo .

Não vi aqui uma resposta que explique isso. Muitas transformações podem ser feitas calculando cada uma das divopções e usando um conjunto complicado de validação. No entanto, se você usar uma função 3D, cada um dos elementos 2D que você possui são considerados elementos 3D e podemos realizar uma transformação de matriz nesses elementos instantaneamente. No entanto, a maioria dos elementos já são "tecnicamente" acelerados por hardware porque todos usam a GPU. Mas, as transformações 3D funcionam diretamente nas versões em cache de cada um desses renderizadores 2D (ou versões em cache do div) e usam diretamente uma transformação de matriz neles (que são matemática FP vetorizada e paralelizada).

É importante observar que as transformações 3D SOMENTE fazem alterações nos recursos em um div 2D em cache (em outras palavras, o div já é uma imagem renderizada). Portanto, coisas como alterar a largura e a cor da borda não são mais "3D" para falar vagamente. Se você pensar sobre isso, alterar as larguras das bordas exige que você refaça o divporque e coloque-o novamente em cache para que as transformações 3D possam ser aplicadas.

Espero que isso faça sentido e entre em contato se tiver mais perguntas.

Para responder à sua pergunta, translate3d: 0x 0y 0znão faria nada, já que as transformações funcionam diretamente na textura que é formada ao executar os vértices do divno shader da GPU. Este recurso de sombreador agora está em cache e uma matriz será aplicada ao desenhar no buffer de quadro. Então, basicamente, não há benefício em fazer isso.

É assim que o navegador funciona internamente.

Etapa 1: analisar a entrada

<div style = "position:absolute;left:0;right:0;bottom:0;top:0;"></div>

Etapa 2: desenvolver camada composta

CompositeLayer compLayer = new CompositeLayer();
compLayer.setPosition(0, 0, 0, 0);
compLayer.setPositioning(ABSOLUTE); // Note. this is psuedocode. The actual code
Pipeline.add(compLayer, zIndex); // would be significantly more complex.

Etapa 3: renderizar camada composta

for (CompositeLayer compLayer : allCompositeLayers){

     // Create and set cacheTexture as active target
     Texture2D cacheTexture = new Texture2D();
     cacheTexture.setActive();

     // Draw to cachedTexture
     Pipeline.renderVertices(compLayer.getVertices());
     Pipeline.setTexture(compLayer.getBackground());
     Pipeline.drawIndexed(compLayer.getVertexCount());

     // Set the framebuffer as active target
     frameBuffer.setActive();

     // Render to framebuffer from texture and **applying transformMatrix**
     Pipeline.renderFromCache(cacheTexture, transformMatrix);
}

Há um bug com a rolagem no MobileSafary (iOS 5) que leva ao aparecimento de artefatos como cópias de elementos de entrada no contêiner de rolagem.

Usar translate3d para cada elemento filho pode corrigir esse bug estranho. Aqui está um exemplo de CSS que salvou o dia para mim.

.scrolling-container {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.scrolling-container .child-element {
    position: relative;
    -webkit-transform: translate3d(0,0,0);
}

Translate3D força a aceleração de hardware . Animações, transformações e transições do CSS não são automaticamente aceleradas pela GPU e, em vez disso, são executadas a partir do mecanismo de renderização de software mais lento do navegador.

Atualmente, navegadores como Chrome, FireFox, Safari, IE9 + e a última versão do Opera vêm com aceleração de hardware, eles só a usam quando têm uma indicação de que um elemento DOM se beneficiaria com ela.

Esteja ciente de que ele cria um contexto de empilhamento (mais que as outras respostas disse), por isso é que , potencialmente, ter um efeito sobre o que você vê, por exemplo, a tomada de algo aparecer sobre uma sobreposição quando não é suposto.