jQuery fadeIn/fadeOut IE cleartype glitch how to fix transition

Question

Well, this is a well known bug with IE and jQuery:

IE is losing ClearType

What I am asking: is it possible to somehow remove that ugly transition effect, before the "fix" is applied. Test this in IE:

http://www.kevinleary.net/wp-samples/ie-fade-problems.php

Although it is a solution to a worse problem, is the possible to fix that tranition and the flash of "un-clear-type" content?

It wouldn't trouble me that much, but it is for my main website menu in jquery (superfish) - those transitions are pretty much visible...

Edit: just one thing to notice - does this happen on your browsers too? Maybe it is something in the IE settings?

Answer 1

There's no way to fix the cleartype going ugly while the fade happens on that content. This is just a (IMO) bad decision the IE team made about how to implement their opacity filter (Direct X, which the way it's implemented in IE doesn't support ClearType).

The only other option that works well is to fade something else, like a <div> on top that fades in, rather than your content with the text fading out...but you said your use is for a menu, so that wouldn't really apply here.

Answer 2

I read all sorts of potential solutions for the internet explorer fade problem, but nothing seemed to work.

Ultimately I decided to go with the absolutely positioned DIV overlay as described in this thread. I have a dynamic height, however, so I used jQuery to change the height of the DIV before the fade. My code ended up looking something like this:

$("#fade-canvas").css('height',$("#wrapper").height()+'px').show();
     /* HIDE or SHOW wrapper child elements as needed */
$("#fade-canvas").css('height',$("#wrapper").height()+'px').fadeOut(600);

Pulled my hair out with this problem, so hopefully this helps someone out.

Answer 3

Good solution Nick!

Various scripts have implemented fixes (like cycle), but currently the best option I've found for fixing the pixelated text during animations is exactly what nick recommends: Overlaying a DIV instead of fading the text itself.

Sorry I couldn't be of more help Sapphire, but thanks for reading!