cosa fa -webkit-transform: translate3d (0,0,0); esattamente? Applicare al corpo?

cosa fa -webkit-transform: translate3d(0,0,0); esattamente? Ha problemi di prestazioni? Dovrei applicarlo solo al corpo o ai singoli elementi? Sembra migliorare drasticamente gli eventi di scorrimento.

Grazie per la lezione!

-webkit-transform: translate3d(0,0,0); fa sì che alcuni dispositivi eseguano la loro accelerazione hardware.

Una buona lettura si trova qui

Le applicazioni native possono accedere all'unità di elaborazione grafica (GPU) del dispositivo per far volare i pixel. Le applicazioni Web, d'altra parte, vengono eseguite nel contesto del browser, che consente al software di eseguire la maggior parte (se non tutto) del rendering, con una conseguente minore potenza per le transizioni. Ma il Web ha recuperato terreno e la maggior parte dei fornitori di browser ora fornisce l'accelerazione hardware grafica per mezzo di particolari regole CSS.

L'utilizzo -webkit-transform: translate3d(0,0,0);farà entrare in azione la GPU per le transizioni CSS, rendendole più fluide (FPS più alti).

Nota: translate3d(0,0,0) non fa nulla in termini di ciò che vedi. sposta l'oggetto di 0px sugli assi x, yez. È solo una tecnica per forzare l'accelerazione hardware.

Un'alternativa è -webkit-transform: translateZ(0). E se c'è uno sfarfallio su Chrome e Safari a causa delle trasformazioni, prova -webkit-backface-visibility: hiddene -webkit-perspective: 1000. Per maggiori info fare riferimento a questo articolo .

Non ho visto una risposta qui che spieghi questo. È possibile eseguire molte trasformazioni calcolando ciascuna delle dive le relative opzioni utilizzando un insieme complicato di convalida. Tuttavia, se utilizzi una funzione 3D, ciascuno degli elementi 2D che hai sono considerati elementi 3D e possiamo eseguire una trasformazione di matrice su questi elementi al volo. Tuttavia, la maggior parte degli elementi sono "tecnicamente" già accelerati hardware perché utilizzano tutti la GPU. Tuttavia, le trasformazioni 3D funzionano direttamente sulle versioni memorizzate nella cache di ciascuno di questi rendering 2D (o versioni memorizzate nella cache di div) e utilizzano direttamente una trasformazione di matrice su di esse (che sono matematiche FP vettorializzate e parallelizzate).

È importante notare che SOLO le trasformazioni 3D apportano modifiche alle caratteristiche su un div 2D memorizzato nella cache (in altre parole, il div è già un'immagine renderizzata). Quindi, cose come cambiare la larghezza e il colore del bordo non sono più "3D" per essere vagamente parlando. Se ci pensi, la modifica della larghezza del bordo richiede di rieseguire il rendering del divperché e memorizzarlo nuovamente in modo che le trasformazioni 3D possano essere applicate.

Spero abbia senso e fammi sapere se hai altre domande.

Per rispondere alla tua domanda, translate3d: 0x 0y 0znon farebbe nulla poiché le trasformazioni funzionano direttamente sulla trama che si forma eseguendo i vertici di divnello shader GPU. Questa risorsa shader è ora memorizzata nella cache e verrà applicata una matrice quando si disegna nel frame buffer. Quindi, fondamentalmente non c'è alcun vantaggio nel farlo.

Ecco come funziona internamente il browser.

Passaggio 1: input di analisi

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

Passaggio 2: sviluppo del livello composito

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.

Passaggio 3: rendering dello strato composito

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);
}

C'è un bug con lo scorrimento in MobileSafary (iOS 5) che fa apparire artefatti come copie di elementi di input nel contenitore a scorrimento.

L'uso di translate3d per ogni elemento figlio può correggere questo strano bug. Ecco un esempio di CSS che mi ha salvato la giornata.

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

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

Translate3D forza l'accelerazione hardware. Le animazioni, le trasformazioni e le transizioni CSSS non sono automaticamente GPU CSSS accelerate dalla , ma vengono eseguite dal motore di rendering software più lento del browser.

Attualmente, browser come Chrome, FireFox, Safari, IE9 + e l'ultima versione di Opera sono tutti dotati di accelerazione hardware, la usano solo quando hanno un'indicazione che un elemento DOM ne trarrebbe vantaggio.

Essere consapevoli che si crea un contesto di stratificazione (oltre a quello che le altre risposte hanno detto), in modo che non potenzialmente hanno un effetto su ciò che si vede, ad esempio, fare qualcosa di apparire più di una sovrapposizione quando non dovrebbe.