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

Question

Hello.

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 text and content too (so it looks like the Flash file). The problem is, the font's look jagged and ugly in Internet Explorer.

My CSS for the font face looks like this:

@font-face {
font-family: 'SansumiRegular';
src: url('../fonts/Sansumi-Bold.eot');
src: local('Sansumi Regular'), local('Sansumi-Bold'), url('../fonts/Sansumi-Bold.ttf') format('truetype');}

...which is generated from: http://www.fontsquirrel.com/fontface/generator

The jQuery for the fade in stuff is like this:

$('#site').css({opacity: '0.0'});
... preloads the images with jQuery, and at callback do fade...
$('#site').animate({opacity: '1.0'}, 1000);

Basically, there is no way around the fact that I need to use that particular font (not standard web font) and I have to use some sort of fade technique for it to 'look like the Flash file'.

This all looks great in Firefox, Safari, Chrome... But in IE it looks rubbish - all jagged and hardly unreadable. After looking around, I found this jQuery plugin that is meant to deal with ClearType issues in IE: http://allcreatives.net/2009/12/05/jquery-plugin-ie-font-face-cleartype-fix/

...but I have a feeling it's this fade in that's causing the problem with the fonts. Maybe it's the fact that IE doesn't really support the opacity CSS command? ...but it does fade in fine one all IEs?! I've even tried a relatively unknown technique of applying a opaque background color (like #FFFFFF) to the elements with the text in that fades, but this still doesn't seem to do anything.

There must be away around this problem? Apart from this small font issue, the site is complete!

Answer 1

IE doesn't support opcity properly. read more here http://stackoverflow.com/questions/921814/jquery-ie-div-opacity-problem and here http://stackoverflow.com/questions/1284163/jquery-ie-fadein-and-fadeout-opacity and here http://icant.co.uk/sandbox/msieopacityissue/

Answer 2

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.

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

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 bug is known to the jQuery team, and hopefully jQuery will do this automatically in a future version: http://dev.jquery.com/ticket/6652)

Answer 6

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.