jQuery fadeIn/fadeOut IE cleartype glitch


Thanks to Benjamin Michael Novakovic for this fix!

While using the jQuery  javascript library today at work, I noticed a glitch under IE7. When fading a html node with the .fadeIn() and .fadeOut() functions in jQuery, IE drops the windows Cleartype rendering; which results in very ugly text. This problem appears to be very common, but no one has a nice solution for the problem.

The most common way to solve this problem is by removing the filter CSS attribute. In normal javascript, it would look like this:

document.getElementById('node').style.removeAttribute('filter');

and in jQuery, it would look like this:

$('#node').fadeOut('slow', function() {
   this.style.removeAttribute('filter');
});

via Benjamin Michael Novakovic » jQuery fadeIn/fadeOut IE cleartype glitch.

Tagged with: , , , , , , , , , , , , , , , , , , , ,
Posted in jQuery, Software Development
6 comments on “jQuery fadeIn/fadeOut IE cleartype glitch
  1. [...] jQuery fadeIn/fadeOut IE cleartype glitch [...]

  2. karmrajsinh says:

    no this is not working . its giving a continuous error in FireFox … For that solution you have to check a browser condition before putting this code.

  3. steve c says:

    I do this:

    if (jQuery.browser.msie)
    this.style.removeAttribute(“filter”);

  4. Tarik says:

    Thanks! The jQuery code worked for me. I used it as a callback within the fade function. Damn you IEEEEE!

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 344 other followers

%d bloggers like this: