I’ve noticed that when I use the jQuery .fadeIn() or .fadeOut() method I see ugly pixelated text in Internet Explorer after the animation has completed. This seems to be related to an issue with an IE specific style filter called clearType. To solve the problem, you need to remove the clearType filter after your jQuery element has faded in. There are a few ways to do this:
Ugly Transitions on Animated Elements
When you animate anything in IE there is an ugly transition effect that occurs before the fix is applied. There’s no way to prevent or fix clearType while the fade occurs. A work-around is to fade something else, like a <div> on top that fades in, rather than your text content.
See a Demo
3 Ways to Fix The Issue
1. Add a Background Color
Set a background color with CSS on the element that is fading in or out. This is the most basic way to solve the problem.
2. Remove the clearType Filter
After fading in an element you can add this simple callback function to fix the bug.
$('#fadingElement').fadeIn(2000, function(){
this.style.removeAttribute('filter');
});
3. Use a Custom fadeIn/Out Method
This method serve’s as a replacement for the built-in fadeIn() & fadeOut() methods for jQuery.
(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);
After you add this method to your JavaScript, change your fadeOut to customFadeOut and your fadeIn to customFadeIn. See a sample of this method on the demo page. Thanks to Benjamin Novakovic for writing this jQuery plugin
Advanced Scenarios
There are more IE related issues that people have mentioned seeing in advanced setups as well.
I found that the answer was to set the z-index. I have a stack of absolutely positioned divs and wanted to fade between them. The only way I could get IE8 to handle the fades nicely was to set the z-index of the element to be faded in higher than the element to be faded out.
$('#fadeoutdiv').css({zIndex:99}).fadeOut(2000);
$('#fadeindiv').css({zIndex:90}).fadeOut(2000);
Thanks to Al Flemming
A demonstration for Al’s fix has been added to the demo page
More Resources
To Fix jQuery FadeIn Internet Explorer Problems:
Meet the Author
