IE is losing ClearType

Question

I'm experiencing something really strange!

I have a div that I'm hiding with JS (jQuery). Like this:

$('#myDiv').hide();

Then when I make a fadeIn like this:

$("#myDiv").fadeIn('slow');

then the text loses ClearType in IE but not in FF. If I go with toggle insted of fadeIn, then it's all fine.

What is IE up to and is there any solutions for it because it looks horrible. (I have ClearType on as you maybe understand at this point)

Answer 1

A quick search on the subject shows the following:

jQuery fadeIn/fadeOut IE cleartype glitch

The problem seems to be that the CSS "filter" attribute is not automatically removed. The most simple solution to this problem would be removing it manually:

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

As the blog post above explains, this is a rather messy solution.

Excerpt from the blog post, including a cleaner solution to this problem:

This means that every single time we want to fade an element, we need to remove the filter attribute, which makes our code look messy.

A simple, more elegant solution would be to wrap the .fadeIn() and .fadeOut() functions with a custom function via the plugin interface of jQuery. The code would be exactly the same, but instead of directly calling the fade functions, we call the wrapper. Like so:

$('#node').customFadeOut('slow', function() { 
   //no more fiddling with attributes here
});

So, how do you get this working? Just include the following code after you include the jQuery library for the added functionality.

(function($) {
    $.fn.customFadeIn = function(speed, callback) {
        $(this).fadeIn(speed, function() {
            if(jQuery.browser.msie)
                $(this).get(0).style.removeAttribute('filter');
            if(callback != undefined)
                callback();
        });
    };
    $.fn.customFadeOut = function(speed, callback) {
        $(this).fadeOut(speed, function() {
            if(jQuery.browser.msie)
                $(this).get(0).style.removeAttribute('filter');
            if(callback != undefined)
                callback();
        });
    };
})(jQuery);

Answer 2

One way is to set a background color on the div (normally) white.