Skip to content


IE8 cleartype font opacity solution

Author: Simon Jackson

One of our current projects required a news ticker that faded in and out with new headlines appearing against a background image. Obviously this is an easy enough effect to implement and relatively quickly, we had a solution in place using the MooTools framework to apply the fade. All seemed fine until we looked at the results in IE8. Firefox, Opera, Safari, IE7 and even IE6 rendered the effect consistently, but IE8 pixelated the font when manipulating the opacity.

It seems that the cleartype anti-aliasing of the font was being removed as the text faded in and out. In the end the solution was simply to tween the colour of the font rather than the opacity. In this instance we could replicate the fade by simply tweening to white and then back to the font colour as we had a solid background behind the text. However, if you had a non-solid background this effect would be more of a headache.