Rerasterización de capas compuestas en cambio de escala

Chris Harrelson
Chris Harrelson
X GitHub

Resumen

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

Esto solo se aplica a las escalas de transformaciones que se producen mediante la manipulación de secuencias de comandos y no se aplica a las animaciones de CSS ni a las animaciones web.

Por lo tanto, es probable que tu sitio muestre contenido de mejor aspecto, aunque también es posible que sea más lento sin los cambios simples que se describen a continuación.

Implicaciones para los desarrolladores web

En virtud de este cambio, se puede considerar que will-change: transform fuerza el contenido para que se genere en tramas en un mapa de bits fijo, que posteriormente nunca cambia con las actualizaciones de transformación. Esto permite a los desarrolladores aumentar la velocidad de transformación de las animaciones en ese mapa de bits, por ejemplo, moverlo, rotarlo o ajustarlo.

No distinguimos entre escalas y transformaciones 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 generar una trama en el elemento en alta calidad en todos los fotogramas no sea lo suficientemente rápido. De lo contrario, evita will-change: transform.

Para optimizar la compensación entre rendimiento y calidad, te recomendamos que agregues will-change: transform cuando comiencen las animaciones y lo quites cuando terminen. Sin embargo, ten en cuenta que, a menudo, agregar o quitar will-change: transform implica un gran costo de rendimiento por única vez.

Consideraciones adicionales para la implementación

Si quitas will-change: transform, el contenido se volverá a tramar a una escala nítida, pero solo en el siguiente fotograma de animación (mediante requestAnimationFrame)). Por lo tanto, si tienes una capa con will-change: transform y solo deseas activar un nuevo procesamiento de la trama, pero luego deseas seguir realizando la animación, debes quitar will-change: transform y, luego, volver a agregarlo en un requestAnimationFrame() callback.

Si en algún momento deseas generar trama a la escala actual durante una animación, aplica la técnica anterior para quitarlo de un fotograma y vuelve 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 un poco costosa. Si eso representa 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 afecta la calidad del contenido renderizado, el rendimiento y el control por parte 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 animación de transformación cuando will-change: transform está presente será rápida.
  • Control del desarrollador: Los desarrolladores pueden agregar y quitar
    will-change: transform para elegir entre la calidad y la velocidad, por elemento y por fotograma de animación.

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

Ejemplos

En este ejemplo, el elemento con el ID remainsBlurry permanecerá borroso 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 de CSS will- change: transform.

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