Fix Font Rendering Issue in IE7 When Using jQuery’s Toggle

There is a really annoying issue with IE7 when using the toggle effect in jQuery. Once the toggle transition is complete, IE7 does not apply Windows ClearType rendering. Even more annoying is Microsoft’s decision to not class this as a bug.

Luckily, there is a workaround.

If your code for the toggle effect is:

$(this).toggle("slow");

then by removing the filter attribute in IE browsers, you can force IE to apply ClearType again. Here is an example:

$(this).toggle("slow", function() { if(jQuery.browser.msie) { this.style.removeAttribute('filter'); } });

This should also work for other effects such as show, fadein etc.

Thanks to Ben Novakovic and Matt Berseth.

One Response to “Fix Font Rendering Issue in IE7 When Using jQuery’s Toggle”

  1. waakdraak Says:

    Thanks a lot, saved my day :)

Leave a Reply