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.
Aanbevolen acties
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
- Van deze bug : Zoomende tijger
- Google Maps op mobiel (maps.google.com) - zoom in op de kaart
- Google Maps Lite op desktop
- Ticketmaster-zitplaatsplattegrond