Font anti-aliasing issues with jQuery.fadeIn in IE8?

Question

I'm banging my head against the wall with an issue I'm having in IE8. I am using the fadeIn function on jQuery to make the site content fade in. This works perfectly fine in all of the other browsers, but when the fadeIn finishes in IE8 the font anti-aliasing seems to change, causing the text to shift slightly.

You can see the site at http://www.ipulse.biz. The code I'm using to cause the fade in is quite simple, as shown below.

var showContent = function() {

  $('#content div:first').fadeIn(1000);

  $('#navigation').fadeIn(500);

} // end showContent

The code is called by a setInterval function, if that makes any difference.

Answer 1

This is caused by ClearType disappearing in Internet Explorer, which is quite annoying.

http://blog.bmn.name/2008/03/jquery-fadeinfadeout-ie-cleartype-glitch/

Answer 2

it needs to be called after the fade effect is completed (e.g. 500ms after etc.)

Answer 3

I know my answer comes a bit too late, but how about thinkin' vice-versa? IE7 / IE8 don't keep anti-alias for Faded text, so, if you have a single color background (e.g. black), you can create an empty div, background-color: #000; position: absolute; display:block; and put it over the text element.

If your request is to have a text FadeIn effect you just have to apply the FadeOut to the "black" layer over it, and vice-versa.

This way the text anti-alias is kept intact.

Answer 4

As previously explained, this is caused by Cleartype in Internet Explorer- but there is a workaround that will at least make this issue tolerable.

$('#navigation').fadeIn(500, function(){
    if ($.browser.msie){this.style.removeAttribute('filter');}
});

That should force IE to clear the transparency and thus render the text normally.

It still isn't pretty, unfortunately.

Answer 5

Sorry for the very late reply, but I had the same problem and was searching for a solution when I came across this topic. I didn't find a working solution in this topic, but I came up with a simple solution that seems to fix the problem perfectly.

In stead of using:

$('.element').fadeIn(500)

use fadeTo and fade to 99%:

$('.element').fadeTo(500, 0.99)

You won't see a difference in the 1% and because it doesn't reach 100% opacity, IE doesn't seem to apply cleartype.

Let me know if this works for anyone else.

Answer 6

Gregory Bolkenstijn, it works!

Answer 7

I fixed this by adding in the css for the required text

filter:alpha(opacity=99);

this will only effect ie. I still get a small shift in ie7 but it's exceptable.

You can see it working here http://thriive.com.au/

Answer 8

just as an aside... as a possible other solution... since your site is doing a fadein on a solid black color... have you considered just animating the text's color from black to white?

Answer 9

Found a ready solution for that problem.

http://jquery.malsup.com/fadetest.html