Antialias issues on text during animations

Question

I have a rotated white div that contains text that says "FOTOS" using a fontface. Like so:

Whenever an animation of any other object that is in the same region as the rotated container div, the font renders like this (for the duration of the animation):

Any idea on why this happens? Ideas on how to fix it are also welcome.

Thanks!

Answer 1

These are not perfect solutions but you could try adding:

-webkit-font-smoothing: antialiased;

and see if that helps. It might give you a slightly thinner font though ...

Sometimes, adding:

-webkit-backface-visibility: hidden;

to the affected elements helps, but I'm not really sure why, and as a third fix you can try to add:

-webkit-transform:translate3d(0,0,0);

which will force hardware acceleration and in this case make the font, as the fix above, unified but slightly thinner ...

But, since you haven't provided any code to your question, my answer is more of a guess.

Anyway, I hope it helps!