Fazer varredura novamente de camadas compostas na mudança de escala

Chris Harrelson
Chris Harrelson
X GitHub

Texto longo, leia o resumo

A partir do Chrome 53, todo o conteúdo passará por uma nova varredura quando a escala de transformação for alterada, se ele não tiver a propriedade CSS will-change: transform. Em outras palavras, will-change: transform significa "Anime-o rápido".

Isso se aplica apenas a escalas de transformação que acontecem por meio de manipulação de script, e não se aplica a animações CSS ou da Web.

Isso significa que seu site provavelmente terá um conteúdo com melhor aparência, mas também pode ser mais lento sem algumas mudanças simples descritas abaixo.

Implicações para desenvolvedores da Web

Com essa mudança, pode-se pensar que will-change: transform força o conteúdo a ser rasterizado em um bitmap fixo, que nunca muda depois das atualizações de transformação. Isso permite que os desenvolvedores aumentem a velocidade de transformação das animações nesse bitmap, por exemplo, movendo-o, girando ou dimensionando-o.

Não distinguimos transformações de escala e translação.

Coloque will-change: transform nos elementos quando você precisar de velocidades de animação de transformação muito rápidas (em outras palavras, 60 fps), e espera-se que a varredura do elemento com alta qualidade em todos os frames não seja rápida o suficiente. Caso contrário, evite will-change: transform.

Para otimizar a compensação da qualidade de desempenho, adicione will-change: transform quando as animações começarem e remova-as quando terminarem. No entanto, que muitas vezes há um alto custo de desempenho único para adicionar ou remover will-change: transform.

Outras considerações de implementação

A remoção de will-change: transform faz com que o conteúdo seja rasterizado novamente em uma escala nítida, mas apenas no próximo frame de animação (via requestAnimationFrame). Assim, se você tiver uma camada com will-change: transform e apenas quiser acionar uma nova varredura e continuar a animação, remova will-change: transform e adicione-a novamente em um requestAnimationFrame() callback.

Se, a qualquer momento durante uma animação, você quiser fazer a varredura na escala atual, aplique a técnica acima para remover em um frame e adicionar will-change: transform novamente em um frame subsequente.

Isso pode fazer com que o conteúdo perca a camada composta, fazendo com que a recomendação acima seja um pouco cara. Se isso for um problema, recomendamos adicionar transform: translateZ(0) ao conteúdo para garantir que ele permaneça em uma camada composta durante essa operação.

Resumo do impacto

Essa mudança tem implicações na qualidade do conteúdo renderizado, no desempenho e no controle do desenvolvedor.

  • Qualidade do conteúdo renderizado: a saída renderizada de elementos que animam a escala de transformação sempre será nítida por padrão.
  • Desempenho: a animação de uma transformação quando will-change: transform estiver presente será rápida.
  • Controle do desenvolvedor: os desenvolvedores podem escolher entre qualidade e velocidade por elemento ou por frame de animação, adicionando e removendo
    will-change: transform.

Consulte o documento de design referenciado acima para ver muito mais detalhes.

Exemplos

Neste exemplo, o elemento com o ID remainsBlurry vai ficar desfocado após essa mudança, mas o elemento com o ID noLongerBlurry vai ficar nítido. Isso ocorre porque o primeiro tem uma propriedade CSS will- change: transform.

Exemplos de animações de escala de transformação de aplicativos reais