Prestazioni CSS relative a translateZ (0)

Un certo numero di blog ha espresso il miglioramento delle prestazioni nel "ingannare" la GPU per pensare che un elemento sia 3D, utilizzandolo transform: translateZ(0)per accelerare le animazioni e le transizioni. Mi chiedevo se ci sono implicazioni nell'utilizzo di questa trasformazione nel modo seguente:

* {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

Le trasformazioni CSS creano un nuovo contesto di impilamento e un blocco contenitore, come descritto nelle specifiche. In parole povere, ciò significa che gli elementi a posizione fissa a cui è stata applicata una trasformazione agiranno più come elementi posizionati in modo assoluto e z-indexche è probabile che i valori vengano rovinati.

Se dai un'occhiata a questa demo , vedrai cosa intendo. Al secondo div viene applicata una trasformazione, il che significa che crea un nuovo contesto di impilamento e gli pseudo elementi vengono impilati in alto anziché in basso.

Quindi fondamentalmente, non farlo. Applicare una trasformazione 3D solo quando è necessaria l'ottimizzazione. -webkit-font-smoothing: antialiased;è un altro modo per sfruttare l'accelerazione 3D senza creare questi problemi, ma funziona solo in Safari.

Se vuoi implicazioni, in alcuni scenari le prestazioni di Google Chrome sono orribili con l'accelerazione hardware abilitata . Stranamente, cambiare il "trucco" in modo che abbia -webkit-transform: rotateZ(360deg);funzionato bene.

Non credo che abbiamo mai capito perché.

Forza il browser a utilizzare l'accelerazione hardware per 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);darà il via alla 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.

Buona lettura qui: http://www.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/

Posso attestare il fatto che -webkit-transform: translate3d(0, 0, 0);rovinerà la nuova position: -webkit-sticky;proprietà. Con un pattern di navigazione del cassetto sinistro su cui stavo lavorando, l'accelerazione hardware che volevo con la proprietà di trasformazione stava interferendo con il posizionamento fisso della mia barra di navigazione superiore. Ho spento la trasformazione e il posizionamento ha funzionato bene.

Fortunatamente, sembra che abbia già avuto l'accelerazione hardware, perché avevo -webkit-font-smoothing: antialiasedl'elemento html. Stavo testando questo comportamento su iOS7 e Android.

Sui dispositivi mobili, l'invio di tutto alla GPU provocherà un sovraccarico di memoria e l'applicazione in crash. L'ho riscontrato su un'app per iPad a Cordova. È meglio inviare solo gli elementi richiesti alla GPU, i div che stai specificatamente spostando.

Meglio ancora, usa le trasformazioni delle transizioni 3d per fare animazioni come translateX (50px) invece di sinistra: 50px;