Yesterday I encountered a really weird issue about font rendering on Safari. I had a web page completely styled and working on all browsers/devices. I was missing only a css animation to fadein/fadeout some images.
With the animations running, Safari started to change font aliasing in unrelated parts of the page from ‘initial’ to ‘antialiased’ on his own, and than back to ‘initial’ at the end of the animation.
Luckily for me, someone already had got this problem.
As explained in one of the answers on stackoverflow:
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:relativeelements that appear after the animating one.
The solution is to give the animating element
z-indexthat puts it above everything else. That way you get your animation but keep the (superior IMO) sub-pixel font rendering on unrelated elements.
Leave a Reply