Ponowne rastowanie skomponowanych warstw przy zmianie skali

Chris Harrelson
Chris Harrelson
X GitHub

TL;DR

Od wersji 53 Chrome wszystkie treści są ponownie rastrowane, gdy zmienia się ich skala transformacji, jeśli nie mają właściwości CSS will-change: transform. Innymi słowy, will-change: transform oznacza „animuj szybko”.

Dotyczy to tylko skalowania przekształceń, które następuje w wyniku manipulacji skryptem. Nie dotyczy animacji CSS ani animacji internetowych.

Oznacza to, że Twoja witryna będzie prawdopodobnie lepiej wyglądać, ale może też działać wolniej, jeśli nie wprowadzisz opisanych poniżej prostych zmian.

Wnioski dla programistów stron internetowych

W ramach tej zmiany will-change: transform można traktować jako wymuszenie rasteryzacji zawartości na stałą mapę bitową, która nigdy nie zmienia się w ramach aktualizacji transformacji. Pozwala to deweloperom zwiększyć prędkość animacji transformacji bitmapy, np. przesuwania, obracania lub skalowania.

Nie rozróżniamy przekształceń skali i przekształceń przesunięcia.

Użyj atrybutu will-change: transform w przypadku elementów, które wymagają bardzo szybkiej (czyli 60 FPS) prędkości transformacji animacji, oraz rasteryzacji elementu w wysokiej jakości w przypadku każdej klatki. W przeciwnym razie unikaj:will-change: transform.

Aby zoptymalizować kompromis między wydajnością a jakością, możesz dodać element will-change: transform na początku animacji i usunąć go na jej końcu. Pamiętaj jednak, że dodanie lub usunięcie will-change: transform często wiąże się z dużym jednorazowym kosztem.

Dodatkowe uwagi dotyczące implementacji

Usunięcie will-change: transform powoduje ponowne przerasterowanie treści w ostrej skali, ale tylko na następnej klatce animacji (za pomocą requestAnimationFrame)). Jeśli więc masz warstwę z will-change: transform i chcesz po prostu wywołać ponowne rastrowanie, ale chcesz kontynuować animację, musisz usunąć will-change: transform, a następnie dodać ją ponownie w requestAnimationFrame() callback.

Jeśli w dowolnym momencie podczas animacji chcesz zastosować rastrowanie w bieżącej skali, zastosuj opisaną powyżej technikę, aby usunąć will-change: transform w jednej klatce, a potem ponownie dodać je w kolejne.

Może to spowodować utratę złożonej warstwy treści, przez co powyższa rekomendacja może być nieco kosztowna. Jeśli to stanowi problem, zalecamy dodanie do treści atrybutu transform: translateZ(0), aby mieć pewność, że pozostanie on na warstwie złożonej podczas tej operacji.

Podsumowanie wpływu

Ta zmiana ma wpływ na jakość renderowanych treści, wydajność i kontrolę dewelopera.

  • Jakość wyrenderowanych treści: domyślnie wyrenderowane elementy, które animują skalę transformacji, będą zawsze ostre.
  • Skuteczność: animacja transformacji, gdy will-change: transform jest obecna, będzie szybka.
  • Kontrola dewelopera: deweloperzy mogą wybierać między jakością a szybkością w przypadku poszczególnych elementów i ramek animacji, dodając i usuwając
    will-change: transform.

Aby dowiedzieć się więcej, zapoznaj się z dokumentem projektowym, na który jest tu nawiązanie.

Przykłady

W tym przykładzie element o identyfikatorze remainsBlurry pozostanie rozmyty po tej zmianie, ale element o identyfikatorze noLongerBlurry stanie się ostry. Dzieje się tak, ponieważ pierwsza z nich ma właściwość CSS will- change: transform.

Przykłady animacji zmiany skali w rzeczywistych zastosowaniach