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

Question

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

Grazie per la lezione!

Answer 1

-webkit-transform: translate3d(0,0,0); alcuni dispositivi eseguono l'accelerazione hardware.

Una buona lettura viene trovato Here

applicazioni native possono accedere al dispositivo unità di elaborazione grafica (GPU) per rendere pixel volare. Le applicazioni Web, d'altra parte, vengono eseguite nel contesto del browser, che consente al software di eseguire la maggior parte (se non lo è ) del rendering, con una conseguente riduzione di potenza per le transizioni. Ma il Web sta recuperando terreno e la maggior parte dei rivenditori di browser ora fornisce l'accelerazione grafica dell'hardware tramite particolari regole CSS.

Utilizzando -webkit-transform: translate3d(0,0,0); si avvia la GPU in azione per le transizioni CSS, rendendole più agevoli (FPS superiore).

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

---

Un'alternativa è -webkit-transform: translateZ(0). E se ci sono sfarfallii su Chrome e Safari a causa delle trasformazioni, prova a -webkit-backface-visibility: hidden e a -webkit-perspective: 1000. Per maggiori informazioni, fare riferimento a this article.

Answer 2

forze Translate3D hardware di accelerazione .CSS animazioni, trasforma e transizioni non sono automaticamente GPU accelerata, e invece eseguire dal software più lento del browser di rendering fine engine.In utilizzare GPU usiamo translate3d

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

Answer 3

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

Utilizzare translate3d per ogni elemento figlio può risolvere quel bug strano. 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); 
} 

Answer 4

Non ho trovato qui una risposta che spieghi questo. È possibile eseguire molte trasformazioni calcolando ciascuna delle div e le relative opzioni utilizzando un complesso set di convalida. Tuttavia, se si utilizza una funzione 3D, ciascuno degli elementi 2D che si hanno sono considerati come elementi 3D e possiamo eseguire una trasformazione della matrice su questi elementi al volo. Tuttavia, la maggior parte degli elementi sono "tecnicamente" già accelerati dall'hardware perché usano tutti la GPU.Tuttavia, le trasformazioni 3D funzionano direttamente sulle versioni cache di ciascuno di questi rendering 2D (o versioni memorizzate nella cache di div) e utilizzano direttamente una trasformazione di matrice su di essi (che sono la matematica FP vettoriale e parallelizzata).

È importante notare che le trasformazioni 3D SOLO apportano modifiche alle funzionalità su un div 2D memorizzato nella cache (in altre parole, il div è già un'immagine renderizzata). Quindi, cose come cambiare la larghezza del bordo e il colore non sono più "3D" per essere vagamente parlando. Se ci pensate, cambiando le larghezze del bordo è necessario rerenderne lo div perché lo memorizziate in modo da poter applicare le trasformazioni 3D.

Spero che questo abbia senso e fammi sapere se hai altre domande.

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

Ecco come funziona il browser internamente.

Fase 1: Parse ingresso

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

Fase 2: Sviluppare strato 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. 

Fase 3: Render 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); 
} 

Answer 5

Ricorda che crea uno stacking context (più ciò che le altre risposte hanno detto), quindi fa potenzialmente ha un effetto su ciò che vedi, ad es. fare apparire qualcosa sopra una sovrapposizione quando non è previsto.