Le animazioni 2D trasformate l'hardware in Safari mobile?

Question

Mi è stato spesso detto che le trasformazioni CSS 3D sono accelerate dall'hardware in Mobile Safari, il che mi fa chiedere se l'implicazione sia che le trasformazioni 2D non lo sono? Non riesco a pensare a nessuna ragione per cui non lo sarebbero, dal momento che possono essere tutti implementati come trasformazioni 3D, ma mi piacerebbe saperlo con certezza.

Se risulta che le trasformazioni 2D non sono accelerate dall'hardware, qualsiasi intuizione sul perché sarebbe molto apprezzata.

Answer 1

Hai ragione, le trasformazioni CSS 2D non sono accelerate dall'hardware in Safari Mobile, ma le trasformazioni 3D lo sono. Non sono sicuro del perché sia ​​così, ma forse hanno deciso che era eccessivo per la maggior parte delle trasformazioni 2D. L'utilizzo della GPU inutilmente potrebbe influire negativamente sulla durata della batteria.

È molto semplice convertire una trasformazione 2D in una trasformazione 3D, quindi non è un gran problema. Un trucco è quello di utilizzare translateZ (0), come descritto qui: http://creativejs.com/2011/12/day-2-gpu-accelerate-your-dom-elements/

EDIT

Apple non dice nulla su di esso nella loro documentazione, per cui è difficile ottenere una fonte autorevole. Ecco cosa aveva Dean Jackson da parte di Apple da dire in proposito (da http://mir.aculo.us/2010/08/05/html5-buzzwords-in-action/):

In sostanza, qualsiasi trasformare che ha un funzionamento 3D come una delle sue funzioni si innescherà compositing hardware, anche se l'attuale trasformare è 2D , o non fare nulla (come translate3d (0,0,0)). Nota che questo è solo un comportamento corrente e potrebbe cambiare in futuro (motivo per cui non lo documentiamo o incoraggiamo). Ma è molto utile in alcune situazioni e può migliorare significativamente le prestazioni di ridisegno.

Ariya Hidayat di Sencha ha scritto un post che spiega l'accelerazione hardware sui browser mobili: http://www.sencha.com/blog/understanding-hardware-acceleration-on-mobile-browsers/. Ecco un frammento da posta:

La migliore pratica di fissare matrice CSS trasformazione translate3d o scale3d (anche se non c'è 3-D coinvolto) deriva dal fatto che tali tipi di matrice passerà l'animato elemento per avere il proprio livello che verrà poi composto insieme al resto della pagina Web e altri livelli. Ma dovresti notare che creare e compositing layer ha un prezzo, vale a dire l'allocazione della memoria. Non è saggio raggruppare ciecamente ogni piccolo elemento della pagina Web per motivi di accelerazione hardware, mangerete memoria.

Questo è un articolo di html5rocks.com che descrive l'accelerazione hardware: http://www.html5rocks.com/en/tutorials/speed/html5/. Ecco uno snippet da esso:

Attualmente la maggior parte dei browser utilizza solo l'accelerazione GPU quando hanno una forte indicazione che un elemento HTML potrebbe trarne vantaggio. L'indicazione più forte è che è stata applicata una trasformazione 3D. Ora potresti non voler applicare una trasformazione 3D, ma ottenere comunque i benefici dall'accelerazione della GPU: nessun problema. Applicare semplicemente la trasformazione dell'identità:

-webkit-transform: translateZ (0);

Firefox e Internet Explorer utilizzano già l'accelerazione hardware per le trasformazioni 2D, quindi non sarei sorpreso se i browser WebKit (Chrome, Safari) lo includessero nel prossimo futuro.