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 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!

Solution 1

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)

Solution 2

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);

Solution 3

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

This link describes the problem

Solution 4

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/

Solution 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.

View more solutions