Using jQuery animate CSS opacity fade and @font-face gives Internet Explorer very ugly font rendering?

Question

I\'m working on a site with HTML/CSS/jQuery that is trying to act like a Flash site. I\'ve had to use @font-face to get the desired font to work. The client wants the fade in of

Answer 1

IE doesn't support opcity properly. read more here JQuery IE <div> opacity problem and here jquery IE Fadein and Fadeout Opacity and here http://icant.co.uk/sandbox/msieopacityissue/

Answer 2

As mentioned in other answers, jQuery uses the IE-only CSS property filter for opacity in Internet Explorer. It is the use of this property that causes the text rendering problems.

If you remove the CSS filter when your animation is complete then the anti-aliasing on the text will be restored:

$('#site').animate({opacity: '1.0'}, 1000, function() {
  $(this).css('filter', 'none');
});

It will still look jagged while the animation is in progress, but it may not be noticeable if the animation is quick.

(This was a known jQuery bug and has since been fixed: http://dev.jquery.com/ticket/6652)

Answer 3

I had the same problem where the fonts look all jagged if I fade in the element. I tried setting the background and found out that it works if I set an opaque background (like #fff) AND set opacity to 0 using jQuery.css(). If I only set opacity to 0 in the stylesheet, it doesn't work. I used fadeTo instead of Animate.

This works in IE8 for me, I haven't tried IE7 though.

Try this in stylesheet:

.fader {
background: none repeat scroll 0 0 #fff;
opacity: 0;
}

And this in JS:

$('.fader').css('opacity', '0').fadeTo(300, 1);

Answer 4

I had this problem, setting the background-color explicitly on the element fixed the problem.

This link describes the problem

Answer 5

I struggled with the cleartype / opacity problem too. I discovered that if the element I want to fade has a solid color background set (css background-color property), the text will render correctly during - and after - fading. So if you don't need a transparent background for the text you can use this workaround. Testet in IE7 only.

Answer 6

Yeah its the opactiy in IE. behind the scenes jQ uses the activeX control to simulate this but that leads crazy things when used in conjunction with transparent png's and type placed over it when the elements are animated.