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.

Answer 3

When fade is applied to IE, it is applying it (at least via jquery) the dxtransform class, which will make it lose any antialiasing effects until its opacity is back to one.

Answer 4

I've managed to pull a somewhat 'generic' solution. removeAttribute doesn't work if opacity is between 0 and 1, so my two cents solution follows:

Put this code just after the first line of jQuery animate method definition (jquery.x.x.x.js)

animate: function( prop, speed, easing, callback ) {
var optall = jQuery.speed(speed, easing, callback);

/*
 * IE rendering anti-aliasing text fix.
 */
// fix START
var old_complete_callback = optall.complete;
optall = jQuery.extend( optall, {complete: function(){
        if (jQuery.browser.msie) {
            var alpha = $(this).css('opacity');
        if(alpha == 1 || alpha == 0) {
            this.style.removeAttribute('filter');
        }
        }
        if (jQuery.isFunction(old_complete_callback)) {
        old_complete_callback.call(this);
        }
    }
});
// fix END

    ...

Hope this will help...

Answer 5

I've managed to pull a somewhat 'generic' solution. removeAttribute doesn't work if opacity is between 0 and 1, so my two cents solution follows:

Put this code just after the first line of jQuery animate method definition (jquery.x.x.x.js)

animate: function( prop, speed, easing, callback ) {
var optall = jQuery.speed(speed, easing, callback);

/*
 * IE rendering anti-aliasing text fix.
 */
// fix START
var old_complete_callback = optall.complete;
optall = jQuery.extend( optall, {complete: function(){
    if (jQuery.browser.msie) {
        var alpha = $(this).css('opacity');
        if(alpha == 1 || alpha == 0) {
            this.style.removeAttribute('filter');
        }
    }
    if (jQuery.isFunction(old_complete_callback)) {
        old_complete_callback.call(this);
    }
}});
// fix END

...

Hope this will help...

Answer 6

I've read Firefox 2 uses its own text rendering engine whenever opacity is applied (at least on a Mac). This sometimes look strange.

I've combated this with this CSS (and it doesn't seem to affect performance at all)

body {
   -moz-opacity: 0.99;
}

This may work in IE too. Oh but you'll need to use IE's propriety filter property.

Answer 7

Ok here's my worst solution ever :

<head>
    <script>
        $(function() {
                $(document.body).fadeIn(0);
        });
    </script>
</head>

<body>

    <script>
        $(document.body).hide();
    </script>

    body text
</body>

Immediately hide the body, and fade it in when document is complete. Then you essentially disable cleartype.

Oh and PLEASE dont anybody actaully do this. Or if it REALLY seems to make sense for you then test it well. Just remember you wont see anything until the whole DOM is loaded. I also saw some wierd graphical glitches.