Bug Tracker

Opened 11 years ago

Closed 8 years ago

#2457 closed bug (invalid)

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

Reported by: chris1234p Owned by: chris1234p
Priority: low Milestone: 1.next
Component: effects Version: 1.4.3
Keywords: fadeIn, animation Cc:
Blocked by: Blocking:

Description

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

Change History (10)

comment:1 Changed 11 years ago by 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.

comment:2 Changed 11 years ago by flesler

Component: corefx

comment:3 Changed 11 years ago by 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

comment:4 Changed 9 years ago by trixi

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

comment:5 Changed 9 years ago by 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.

comment:6 Changed 9 years ago by snover

Milestone: 1.2.4
Priority: majorlow
Status: newopen
Version: 1.2.31.4.3

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

comment:7 Changed 9 years ago by 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?

comment:8 Changed 9 years ago by anonymous

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

comment:9 Changed 8 years ago by timmywil

Milestone: 1.next
Owner: set to chris1234p
Status: openpending

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.

comment:10 Changed 8 years ago by trac-o-bot

Resolution: invalid
Status: pendingclosed

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!

Note: See TracTickets for help on using tickets.