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 w

Answer 1

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 2

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 3

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 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

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

Answer 6

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.