Samengestelde lagen opnieuw rasteren bij schaalverandering

Chris Harrelson
Chris Harrelson
X GitHub

TL; DR

Vanaf Chrome 53 wordt alle inhoud opnieuw gerasterd wanneer de transformatieschaal verandert, als deze niet de eigenschap will-change: transform CSS heeft. Met andere woorden, will-change: transform betekent "animeer het alsjeblieft snel".

Dit is alleen van toepassing op transformatieschalen die plaatsvinden via scriptmanipulatie, en is niet van toepassing op CSS-animaties of webanimaties .

Dit betekent dat uw site waarschijnlijk mooiere inhoud krijgt, maar dat deze ook langzamer kan zijn zonder enkele eenvoudige wijzigingen die hieronder worden beschreven.

Gevolgen voor webontwikkelaars

Onder deze verandering will-change: transform kan worden gezien als het dwingen van de inhoud om te worden gerasterd naar een vaste bitmap, die vervolgens nooit verandert onder transformatie-updates. Hierdoor kunnen ontwikkelaars de snelheid van transformatie-animaties op die bitmap verhogen, zoals verplaatsen, roteren of schalen.

We maken geen onderscheid tussen schaal- en vertaaltransformaties.

Zet will-change: transform op elementen wanneer je zeer snelle (met andere woorden, 60 fps) transformatie-animatiesnelheden nodig hebt, en de verwachting is dat het rasteren van het element met hoge kwaliteit op elk frame niet snel genoeg is. Vermijd anders will-change: transform .

Om de afweging tussen prestatie en kwaliteit te optimaliseren, wil je misschien will-change: transform wanneer animaties beginnen en verwijderen wanneer ze eindigen. Houd er echter rekening mee dat er vaak grote eenmalige prestatiekosten zijn verbonden aan het toevoegen of verwijderen van will-change: transform .

Aanvullende implementatieoverwegingen

Het verwijderen van will-change: transform zorgt ervoor dat de inhoud op een scherpe schaal opnieuw wordt gerasterd, maar alleen op het volgende animatieframe (via requestAnimationFrame) . Dus als u een laag met will-change: transform hebt en eenvoudigweg een herraster wilt activeren maar vervolgens wilt doorgaan met animeren, moet u will-change: transform verwijderen en deze vervolgens opnieuw toevoegen in een requestAnimationFrame() c allback.

Als u op enig moment tijdens een animatie op de huidige schaal wilt rasteren, pas dan de bovenstaande techniek toe om in één frame te verwijderen. Het opnieuw toevoegen will-change: transform in een volgend frame.

Dit kan als neveneffect hebben dat de inhoud zijn samengestelde laag verliest, waardoor de bovenstaande aanbeveling enigszins duur wordt. Als dat een probleem is, raden we aan om ook transform: translateZ(0) aan de inhoud toe te voegen om ervoor te zorgen dat deze tijdens deze bewerking in een samengestelde laag blijft.

Samenvatting van de impact

Deze wijziging heeft gevolgen voor de kwaliteit, prestaties en controle van de ontwikkelaar.

  • Kwaliteit van de weergegeven inhoud : de weergegeven uitvoer van elementen die de transformatieschaal animeren, zal standaard altijd helder zijn.
  • Prestaties : transformatie animeren wanneer will-change: transform is aanwezig en zal snel zijn.
  • Controle door ontwikkelaars : ontwikkelaars kunnen kiezen tussen kwaliteit en snelheid, per element en per animatieframe, door toevoegingen en verwijderingen
    will-change: transform .

Zie het ontwerpdocument waarnaar hierboven wordt verwezen voor veel meer details.

Voorbeelden

In dit voorbeeld blijft het element met de remainsBlurry ID wazig na deze wijziging, maar het element met de noLongerBlurry ID wordt helder. Dat komt omdat de eerstgenoemde een will- change: transform .

Voorbeelden van transformatieschaalanimaties van echte toepassingen