November 23, 2005

IE font nastiness when using opacity filters

I’ve been working with the Scriptaculous library to do some fade in/out effects on some text. I recently migrated to a new machine with XP on it (yes, I’m MS Current ™ now), and noticed the text gets all nasty. It appears over-bolded and extremely jagged – almost illegible, like this:

Nasty Fonts

Well after hours of trying this and that, I finally tracked down enough to find a solution.

The Fix
Add a background color (transparent doesn’t work) or image to the container element.

With the ‘fix’ applied, the same text now looks like this:

Good Fonts

Thanks for a new one Microsoft. 😐

Many thanks to The Strange Zen of JavaScript for taking care of my headache.

Add a Comment