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 é rasterizado novamente quando a escala de transformação é alterada, se não tiver a propriedade CSS will-change: transform. Em outras palavras, will-change: transform significa "anime rápido".

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

Isso significa que o conteúdo do seu site provavelmente vai ficar mais bonito, mas também pode ficar mais lento sem algumas mudanças simples descritas abaixo.

Implicações para desenvolvedores da Web

Com essa mudança, will-change: transform pode ser considerado como forçar o conteúdo a ser rasterizado em um bitmap fixo, que nunca mais muda nas atualizações de transformação. Isso permite que os desenvolvedores aumentem a velocidade das animações de transformação nesse bitmap, como movê-lo, girá-lo ou redimensioná-lo.

Não fazemos distinção entre transformações de escala e de tradução.

Coloque will-change: transform em elementos quando você precisar de velocidades de transformação de animação muito rápidas (ou seja, 60 fps), e é esperado que a rasterização do elemento em alta qualidade em cada frame não seja rápida o suficiente. Caso contrário, evite will-change: transform.

Para otimizar o trade-off entre performance e qualidade, adicione will-change: transform quando as animações começarem e remova quando elas terminarem. No entanto, esteja ciente de que, muitas vezes, há um custo de desempenho único alto 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 (usando requestAnimationFrame). Portanto, se você tiver uma camada com will-change: transform e quiser acionar uma rasterização novamente, mas continuar animando, remova will-change: transform e adicione novamente em um requestAnimationFrame() callback.

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

Isso pode ter o efeito colateral de o conteúdo perder 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 para a qualidade, o desempenho e o controle do desenvolvedor do conteúdo renderizado.

  • 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.
  • Performance: a animação da transformação quando will-change: transform está presente será rápida.
  • Controle do desenvolvedor: os desenvolvedores podem escolher entre qualidade e velocidade, por elemento e por frame de animação, adicionando e removendo
    will-change: transform.

Consulte a documentação de design referenciada acima para mais detalhes.

Exemplos

Neste exemplo, o elemento com o ID remainsBlurry vai permanecer 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 transformação de escala de aplicativos reais