Fixing IE8 font aliasing when using fade effects

One of the joys of testing with IE8 is the added google time that I get to spend hunting down bugs and solutions. If you find something mesbehaving in Redmond’s browser, then the Internet knows about it and has a fix somewhere.

Todays culprit was caused by using jQuery’s fadeIn effect on a div containing text. The way that jQuery has to animate the opacity transition causes the font’s to not be anti-aliased, appearing all rough and blocky during the animation. It’s due to the use of the filter property to affect the opacity, There are a couple of fixes, including hooking into jQuery to alter how the fadeIn/fadeOut/fadeTo effects work, but the simplest solution is to give the element containing the text a background-color.

Although littering your CSS with redundant background-colors will be a pain when you redesign your site, I think its preferable to relying on a javascript solution.