El hack translate3d(0,0,0) y precauciones en su uso 1.2.14

El hack translate3d(0,0,0) y precauciones en su uso

De un tiempo a esta parte estarás observando el aumento de autores y páginas que utilizan en su código algo como transform: translateZ(0); o transform: translate3D(0,0,0). Hay autores que lo llaman the null transform hack.

Para quienes lo desconozcan, esta declaración en el Css causa un doble efecto:

1. Fuerza la composición por hardware
2. Crea una nueva capa (layer) de renderizado

en Chrome y navegadores que usan su motor. En Firefox este hack no es efectivo ni tampoco he encontrado nada equivalente, ya que Firefox (en las máquinas y software que lo permiten) la acelaración por hardware está activada por defecto.

Composición por hardware

Significa que en la composición de la página (su renderizado) el motor del navegador (Chrome) se ve ayudado por la GPU de la máquina en vez de ser la CPU la que corra con todo el trabajo.

Cosa que alivia y acelera el trabajo del navegador para mostrar la página. Especialmente si hay carga de trabajo por los repaints y reflows.

Capa de renderizado

Ojo, al hablar de capas en este contexto entiende el concepto capa tal como se hace en la composición de las páginas al hablar de z-index y la capa de apilamiento que genera. Esto es, un "espacio" propio y ajeno al resto donde las transformaciones tienen lugar o un contexto gráfico en el que se dibujan y tienen lugar los "repaint y reflow".

Peligros de translate3d(0,0,0)

Si utilizas el hack de cualquier manera y sin limitaciones en máquinas bien dotadas y potentes, como los equipos de escritorio, el usar la GPU y su VRAM para manejar una cantidad elevada de capas de renderizado y los repaint y reflows no supone mayor problema. Pero en equipos menos potentes, especialmente en dispositivos móviles (tables y teléfonos) en los que su potencia gráfica y memoria VRAM son las que son y más bien van justos, puede traducirse en una pésima idea y degradación de la representación. Incluso puede forzar su colapso.

Qué necesita su propio contexto

Según Chrome estos son los criterios para saber si una capa necesita su propio espacio de renderizado:

• Layer has 3D or perspective transform CSS properties
• Layer is used by <video> element using accelerated video decoding
• Layer is used by a <canvas> element with a 3D context or accelerated 2D context
• Layer is used for a composited plugin
• Layer uses a CSS animation for its opacity or uses an animated webkit transform
• Layer uses accelerated CSS filters
• Layer with a composited descendant has information that needs to be in the composited layer tree, such as a clip or reflection
• Layer has a sibling with a lower z-index which has a compositing layer (in other words the layer is rendered on top of a composited layer)

Así que para aprovechar toda la potencia de la aceleración en el renderizado y no caer en los peligros potenciales que encierra el usar el hack transform: translateZ(0); o transform: translate3D(0,0,0) en Chrome, lo más sensato parece no declararlo a todo y de forma excesivamente generosa lo mejor es reservarlo para aquellos casos en que Chrome aplica esta aceleración.

Información y artículos complementarios:

1. GPU Accelerated Compositing in Chrome
2. Take care when using null transform hacks for forced GPU acceleration

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso