fadeIn Effect causes text to loose TrueType in IE7, solution included

[chris1234p]

This was driving me insane for a whole day, I noticed that the text on my page was thinner and uglier then it should have been. Turns out I was fading the whole page in upon document ready. A known fix is to completely remove the filter attribute/style after fading in or out.

I learned about this fix here: ​http://mattberseth.com/blog/2007/12/ie7_cleartype_dximagetransform.html

[babybluebox]

Please, ClearType and Background on IE6 and IE7 issue must be fix. It is very annoying to have to include a fix every time I use animations like fadeOut(), fadeIn(), hide(), and show().

You can download this file to test it out in IE6 and IE7: ​http://www.williamchang.org/jquery/index.htm

CSS:

.bgwhite { background-color:#fff; }

JavaScript:

	if($.browser.msie) {$('p#box1').addClass('bgwhite');}
	$('a#link2', $('div.section')).toggle(function() {
		$('p#box1').fadeOut('slow',function() {
			$(this).addClass('error');
		}).fadeIn('slow', function() {
			if($.browser.msie) {$(this).get(0).style.removeAttribute('filter');}
		});
		return false;
	}, function() {
		$('p#box1').fadeOut('slow',function() {
			$(this).removeClass('error');
		}).fadeIn('slow', function() {
			if($.browser.msie) {$(this).get(0).style.removeAttribute('filter');}
		});
		return false;
	});

I'm new. Please don't let me down jQuery.

[malsup]

I agree that this should be fixed in jQuery rather than in individual plugins. I have code to handle this in the Cycle Plugin since it supports fade transitions. I often point people to this page when they have cleartype problems, although it's not a full solution:

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

[trixi]

I made some changes, that should fix this annoying bug. You can find the changes here: ​http://github.com/aFarkas/jquery/commit/7e588fca9d66df833639e28e0d94ceb7f4eee40c

[anonymous]

Has this been fixed yet? I have stopped using all fade animations because of this issue. It would be nice to use them again.

[snover]

Looks like IE8 is smart enough to ignore 100% opacity but earlier versions of IE are not.

[anonymous]

I also ran into the display problem in IE, and changing the zoom value seems to fix it for me.

$('div#test').fadeOut ('slow').fadeIn ('slow',function(){$(this).css ({zoom:'normal'})});

Maybe the default value should be set to 'normal' instead of 1?

[anonymous]

Also, If you take the 'normal' out of zoom: like this; ({zoom:}) works the same as in 'normal' in IE7/IE8.

[timmywil]

I've created a test case here and am unable to reproduce: ​http://jsfiddle.net/timmywil/3TJcy/ If this is still an issue, please update my test case or provide a new one.

[trac-o-bot]

Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!