Zusammengesetzte Ebenen bei Skalierungsänderung neu rastern

Chris Harrelson
Chris Harrelson
X GitHub

Kurzfassung

Ab Chrome 53 werden alle Inhalte neu gerastert, wenn sich die Transformationsskala ändert, sofern die CSS-Property will-change: transform nicht vorhanden ist. Mit anderen Worten: will-change: transform bedeutet „animieren Sie es bitte schnell“.

Dies gilt nur für Skalierungen von Transformationen, die über Script-Manipulation erfolgen, und nicht für CSS-Animationen oder Web-Animationen.

Das bedeutet, dass die Inhalte Ihrer Website wahrscheinlich ansprechender aussehen, aber ohne einige der unten beschriebenen einfachen Änderungen auch langsamer sein können.

Auswirkungen auf Webentwickler

Durch diese Änderung wird mit will-change: transform erzwungen, dass der Inhalt in eine feste Bitmap gerastert wird, die sich bei Transformationsaktualisierungen nicht mehr ändert. So können Entwickler die Geschwindigkeit von Transformationsanimationen für diese Bitmap erhöhen, z. B. durch Verschieben, Drehen oder Skalieren.

Wir unterscheiden nicht zwischen Skalierungs- und Verschiebungstransformationen.

Verwenden Sie will-change: transform für Elemente, wenn Sie eine sehr schnelle Transformationsanimation (60 fps) benötigen und das Rastern des Elements in hoher Qualität in jedem Frame nicht schnell genug ist. Andernfalls sollten Sie will-change: transform vermeiden.

Um den Kompromiss zwischen Leistung und Qualität zu optimieren, sollten Sie will-change: transform am Anfang von Animationen hinzufügen und am Ende entfernen. Beachten Sie jedoch, dass das Hinzufügen oder Entfernen von will-change: transform oft hohe einmalige Leistungskosten verursacht.

Weitere Implementierungsüberlegungen

Wenn du will-change: transform entfernst, werden die Inhalte in einer scharfen Skalierung neu gerastert, aber nur im nächsten Animationsframe (über requestAnimationFrame)). Wenn Sie also eine Ebene mit will-change: transform haben und einfach ein erneutes Rastern auslösen, aber dann mit der Animation fortfahren möchten, müssen Sie „will-change: transform“ entfernen und dann in einem requestAnimationFrame() callback wieder hinzufügen.

Wenn Sie während einer Animation jederzeit mit dem aktuellen Maßstab rastern möchten, entfernen Sie will-change: transform in einem Frame und fügen Sie ihn in einem nachfolgenden Frame wieder hinzu.

Dies kann dazu führen, dass die zusammengesetzte Ebene der Inhalte verloren geht, was die oben genannte Empfehlung etwas kostspielig macht. Wenn das ein Problem darstellt, empfehlen wir, den Inhalten ebenfalls transform: translateZ(0) hinzuzufügen, damit sie während dieses Vorgangs in einer zusammengesetzten Ebene bleiben.

Zusammenfassung der Auswirkungen

Diese Änderung hat Auswirkungen auf die Qualität, Leistung und Entwicklersteuerung der gerenderten Inhalte.

  • Qualität der gerenderten Inhalte: Die gerenderte Ausgabe von Elementen, die die Transformierungsskala animieren, ist standardmäßig immer scharf.
  • Leistung: Die Transformation wird bei vorhandener will-change: transform schnell animiert.
  • Entwicklersteuerung: Entwickler können zwischen Qualität und Geschwindigkeit wählen, und zwar pro Element und pro Animationsframe, indem sie
    will-change: transform hinzufügen oder entfernen.

Weitere Informationen finden Sie im oben verlinkten Designdokument.

Beispiele

In diesem Beispiel bleibt das Element mit der ID remainsBlurry nach dieser Änderung unscharf, das Element mit der ID noLongerBlurry wird jedoch scharf. Das liegt daran, dass das erste eine CSS-Eigenschaft vom Typ will- change: transform enthält.

Beispiele für Skalierungsanimationen aus der Praxis