A font rendering issue in webkit that can blow your head

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: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.