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)

Surd

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

Hydrography

grr why cant they put this in the standard fadeIn. just confirmed its not in 1.3.1 (at least not without requiring additional configuration) so probably not there – Folder

even with this solution it still looks pretty awful in my opinion. its blatently obvious there is a glitch. best to try as possible to just fade in colored boxes and let the text appear instantaneously – Folder

As of jQuery 1.9, the jQuery.browser identifier is deprecated. Awesome... :-( Any suggestions for how to implement the above code via "feature detection" instead of "browser detection"? – Fizgig

Answer 2

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

Ethiop

This has worked for me the couple of times I've come across the issue. I think you need to set the background colour on the element that's being faded in or out. – Autoroute

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.

Whistler

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

Knoxville

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

Knoxville

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.

Pimentel

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.

Folder