¿Las aceleraciones 2D transforman el hardware en Mobile Safari?

Question

A menudo me han dicho que las transformaciones CSS 3D son aceleradas por hardware en Mobile Safari, lo que me hace preguntarme si la implicación es que las transformaciones 2D no lo son. No se me ocurre ninguna razón por la que no lo sean, ya que básicamente pueden implementarse como transformaciones tridimensionales, pero me gustaría saberlo con certeza.

Si resulta que las transformaciones 2D no son aceleradas por hardware, cualquier idea de por qué sería muy apreciada.

Answer 1

Tiene razón, las transformaciones CSS 2D no son aceleradas por hardware en Mobile Safari, pero las transformaciones 3D sí lo son. No estoy seguro de por qué es así, pero tal vez decidieron que era excesivo para la mayoría de las transformaciones 2D. Usar la GPU innecesariamente podría afectar negativamente la duración de la batería.

Es muy fácil convertir una transformación 2D en una transformación 3D para que no sea un gran problema. Un truco es usar translateZ (0) tal como se describe aquí: http://creativejs.com/2011/12/day-2-gpu-accelerate-your-dom-elements/

EDITAR

de Apple no dice nada al respecto en su documentación, por lo que es difícil conseguir una fuente autorizada. Esto es lo que Dean Jackson de Apple tenía que decir al respecto (de http://mir.aculo.us/2010/08/05/html5-buzzwords-in-action/):

En esencia, cualquier transformar que tiene una operación de 3D como una de sus funciones dará lugar a la composición de hardware, incluso cuando el actual transformar es 2D , o no hacer nada en absoluto (como translate3d (0,0,0)). Tenga en cuenta que este es solo el comportamiento actual, y podría cambiar en el futuro (por lo que no lo documentamos ni fomentamos). Pero es muy útil en algunas situaciones y puede mejorar significativamente el rendimiento del redibujado.

Ariya Hidayat de Sencha escribió una publicación que explica la aceleración de hardware en los navegadores móviles: http://www.sencha.com/blog/understanding-hardware-acceleration-on-mobile-browsers/. He aquí un fragmento del mensaje:

La mejor práctica de fijar la matriz de transformación CSS para translate3d o scale3d (a pesar de que no existe en 3-D involucrados) viene del hecho de que esos tipos de matriz se cambiará el animado elemento para tener su propia capa que luego será compuesta junto con el resto de la página web y otras capas. Pero debe tener en cuenta que crear y componer capas tiene un precio, a saber, asignación de memoria. No es aconsejable componer ciegamente cada pequeño elemento en la página web por el bien de la aceleración del hardware, comerás memoria.

Aquí hay un artículo de html5rocks.com que analiza la aceleración de hardware: http://www.html5rocks.com/en/tutorials/speed/html5/. Aquí hay un fragmento del mismo:

Actualmente, la mayoría de los navegadores solo utilizan la aceleración de GPU cuando tienen una fuerte indicación de que un elemento HTML se beneficiaría de ello. La indicación más fuerte es que se le aplicó una transformación 3D. Ahora es posible que realmente no desee aplicar una transformación 3D, pero aún así obtener los beneficios de la aceleración de la GPU: no hay problema. Simplemente aplique la transformación de identidad:

-webkit-transform: translateZ (0);

Firefox e Internet Explorer ya utilizan la aceleración de hardware para la transforma en 2D, por lo que no se sorprendería si los navegadores WebKit (Chrome, Safari) se incluyen en un futuro próximo.