CSS Animation triggers text rendering change in Safari & Chrome (Webkit)
Why Stack Overflow recommends it
Stack Overflow users link it when answering questions about fonts or text weight changing oddly while a CSS animation runs, since it shows the bug and the z-index fix live.
Recommended by 1 people across 1 different months, 2012 to 2015.
What it is
A short screencast by Jake Archibald demonstrating a WebKit bug seen at Lanyrd, where running a CSS animation made unrelated text change its rendering in Safari and Chrome. It shows the cause, GPU compositing pulling overlapping elements onto the GPU, and the fix of giving the animated element position:relative and a higher z-index.
What people said
Recommends Remo L. · 2015-04 · Stack Overflow · on “CSS Fixed Position Font Changing”
Try to use z-index: 1 and position relative on the parent element. See solution in this video: [this video] I can imagine it has something to do with each other.
Cites JaffaTheCake · 2012-09 · Stack Overflow · on “Safari changing font weights when unrelated animations are running”
When you trigger GPU compositing (eg, through CSS animation), the browser sends that element to the GPU, but also anything that would appear on top of that element if its top/left properties were changed. This includes any position:relative elements that appear after the animating one. The solution is to give the animating element position:relative and a z-index that puts it above everything else. That way you get your animation but keep the (superior IMO) sub-pixel font rendering on unrelated elements. Here's a demo of the problem and solution [this video] Update: Newer versions of Chrome retain sub-pixel antialiasing on GPU composited elements as long as the element has no transparency, eg has
Cites Rajat Sharma · 2015-07 · Stack Overflow · on “Safari Link Hover Issue”
When you trigger GPU compositing (eg, through CSS animation), the browser sends that element to the GPU, but also anything that would appear on top of that element if its top/left properties were changed. This includes any position:relative elements that appear after the animating one. The solution is to give the animating element position:relative and a z-index that puts it above everything else. That way you get your animation but keep the (superior IMO) sub-pixel font rendering on unrelated elements. Here's a demo of the problem and solution [this video] Update: Newer versions of Chrome retain sub-pixel antialiasing on GPU composited elements as long as the element has no transparency, eg has