Text Anti-Aliasing and Transforms
SHOULD: Animate a wrapper rather than the text node when scaling — re-rasterizing glyphs at fractional sizes makes strokes crawl and can flip sub-pixel anti-aliasing to grayscale mid-flight, and one wrapper transform keeps the lockup scaling as a single object. If artifacts persist, promote the wrapper with `translateZ(0)` or `will-change: transform` and release it when the transition ends (blanket promotion is still wrong — see `performance-gpu-translatez`).
Animate a wrapper rather than the text node itself, and promote it to its own layer when scaling artifacts persist
.title-wrap { will-change: transform; transform: scale(0.96); }
.title-wrap.is-in { transform: scale(1); } /* drop will-change on transitionend */Bad
Good
Why it matters
Glyphs are hinted and anti-aliased for the size they are rendered at. Put a scale transform directly on a text node and the browser may re-rasterize it at every intermediate fractional size, so the strokes visibly crawl and thicken through the animation, and sub-pixel anti-aliasing can switch to grayscale mid-flight. Moving the transform up to a wrapper fixes the composition too: one transform and one origin means the lockup scales as a single object instead of each line scaling about its own centre and drifting apart.
If artifacts survive that, promote the wrapper — translateZ(0) or will-change: transform gives it its own compositor layer, so the text is rasterized once and merely re-composited per frame. Distinct from performance-gpu-translatez, which is about when promotion is worth its memory cost at all (and warns against blanket promotion) — here promotion is a targeted, transient fix for a rendering artifact, applied to the animating wrapper and released when the transition ends.
Also distinct from content-font-smoothing, which concerns static -webkit-font-smoothing choices, not the smoothing change a transform induces.