Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery fadeIn leaves text not anti-aliased in IE7

Tags:

Why does this happen? Any workarounds?

jQuery:

$(function() {
   $('p.quote').fadeIn(3000);
});

HTML:

<p>someone said:</p>
<p class="quote">&ldquo;lorem ipsum&rdquo;</p>
<p>someone else said:</p>
<p class="quote" style="display: none;">&ldquo;magna carta&rdquo;</p>
like image 261
chrisdillon Avatar asked Apr 22 '09 16:04

chrisdillon


1 Answers

There is a known bug with IE and the fadeIn/fadeOut functions and their effect on text elements. Check out the info here:

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

Looks like my original link has since gone dead. Updated with a different solution from the comments:

http://malsup.com/jquery/cycle/cleartype.html

The workaround is to remove the 'filter' property of the element in a callback function after fadeIn() has finished.

like image 132
Justin Niessner Avatar answered Oct 31 '22 09:10

Justin Niessner