Rerasterización de capas compuestas en cambio de escala

Chris Harrelson
Chris Harrelson
X GitHub

A modo de resumen

A partir de Chrome 53, todo el contenido se vuelve a rasterizar cuando cambia su escala de transformación, si no tiene la propiedad CSS will-change: transform. En otras palabras, will-change: transform significa “animarla rápido”.

Esto solo se aplica a las escalas de transformación que se producen a través de la manipulación de secuencias de comandos y no a las animaciones CSS ni a las animaciones web.

Esto significa que es probable que tu sitio tenga un contenido de mejor aspecto, pero también podría ser más lento si no realizas algunos cambios simples que se describen a continuación.

Implicaciones para los desarrolladores web

Con este cambio, se puede considerar que will-change: transform obliga a que el contenido se rasterice en un mapa de bits fijo, que luego nunca cambia con las actualizaciones de transformación. Esto permite a los desarrolladores aumentar la velocidad de las animaciones de transformación en ese mapa de bits, como moverlo, rotarlo o escalarlo.

No distinguimos entre las transformaciones de escala y de traducción.

Coloca will-change: transform en los elementos cuando necesites velocidades de animación de transformación muy rápidas (en otras palabras, 60 fps) y se espera que la rasterización del elemento con alta calidad en cada fotograma no sea lo suficientemente rápida. De lo contrario, evita will-change: transform.

Para optimizar la relación rendimiento-calidad, te recomendamos que agregues will-change: transform cuando comiencen las animaciones y lo quites cuando finalicen. Sin embargo, ten en cuenta que, a menudo, agregar o quitar will-change: transform genera un gran costo de rendimiento único.

Consideraciones adicionales para la implementación

Si quitas will-change: transform, el contenido se vuelve a renderizar en una escala nítida, pero solo en el siguiente fotograma de animación (a través de requestAnimationFrame)). Por lo tanto, si tienes una capa con will-change: transform y solo deseas activar un nuevo renderizado, pero luego continuar con la animación, debes quitar will-change:transform y, luego, volver a agregarlo en un requestAnimationFrame() callback.

Si en algún momento durante una animación deseas rasterizar en la escala actual, aplica la técnica anterior para quitarlo en un fotograma y volver a agregar will-change: transform en un fotograma posterior.

Esto puede tener el efecto secundario de que el contenido pierda su capa compuesta, lo que hace que la recomendación anterior sea algo costosa. Si eso es un problema, te recomendamos que también agregues transform: translateZ(0) al contenido para asegurarte de que permanezca en una capa compuesta durante esta operación.

Resumen del impacto

Este cambio tiene implicaciones para la calidad del contenido renderizado, el rendimiento y el control del desarrollador.

  • Calidad del contenido renderizado: El resultado renderizado de los elementos que animan la escala de transformación siempre será nítido de forma predeterminada.
  • Rendimiento: La transformación de animación será rápida cuando will-change: transform esté presente.
  • Control de desarrollador: Los desarrolladores pueden elegir entre calidad y velocidad, por elemento y por fotograma de animación, agregando y quitando
    will-change: transform.

Consulta el documento de diseño de referencia anterior para obtener muchos más detalles.

Ejemplos

En este ejemplo, el elemento con el ID remainsBlurry permanecerá desenfocado después de este cambio, pero el elemento con el ID noLongerBlurry se volverá nítido. Esto se debe a que el primero tiene una propiedad CSS will- change: transform.

Ejemplos de animaciones de escala de transformación de aplicaciones reales