jQuery fadeIn/fadeOut IE cleartype glitch


Thanks to Benjamin Michael Novakovic for this fix!

jQuery fadeIn/fadeOut IE cleartype glitch

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.

Published by willwm

6 Comments

  1. Pingback: IE7 Fuente en Bold se ve mal!!!!! - Foros de CHW
  2. Pingback: Software Development Posts « Williamo's Blog
  3. karmrajsinh says:
    November 14, 2010 at 10:36 pm

    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.

    Reply
  4. steve c says:
    March 21, 2011 at 6:09 am

    I do this:

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

    Reply
  5. Tarik says:
    May 6, 2011 at 11:45 am

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

    Reply
  6. jammama says:
    January 3, 2012 at 12:02 am

    no working !!!

    Reply

Leave a Comment