Text rendering blurred in Firefox and Internet Explorer using jQuery

Question

Not sure what causes this?

If I user slideDown in Firefox the text rendering cuts off the top of the letters before the animation is complete. This is ok in IE.

If I then change the animation to use fadeIn instead, the blur does not happen in Firefox but the text is very jagged in IE.

From another question I have asked in the past pertaining to animation, the guy told me that I should wrap that which I want to animate in another DIV and animate that instead. This sorted out the jerkiness caused by the padding on the content inside the .animateDiv.

Is there a trick to the text rendering as well in jQuery

Answer 1

I think IE has a problem with ClearType and animations. Not sure about FF.

Answer 2

You need to use a technique like here or here. Basically any fading in IE has to be done by a CSS filter, which is actually an IE specific thing that really FUBARs CelarType...so when you're finishing fading in or out, you need to remove that filter it leaves behind.

Now for partially faded text, this won't help, but if you're fading all the way in or out, this will clear up the result...during fading you'll still have jagged text, this is just how IE behaves unfortunately (IE9 fixes this, but IE7/8 aren't going anywhere for a long time).

If you use the technique in the first link, just include the functions (just once) before using them anywhere, like this:

$.fn.customFadeIn = function(speed, callback) {
    $(this).fadeIn(speed, function() {
        if(!$.support.opacity)
            $(this).get(0).style.removeAttribute('filter');
        if(callback != undefined)
            callback();
    });
};

Then instead of .fadeIn(), you call .customFadeIn() instead, like this:

$("#uglyThingInIE").customFadeIn(500);