6

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!

1
  • UPDATE: It's not a problem with the fade in. It's the problem with how IE 7 and 8 display fonts using @font-face. I've tried the techniques explained in the link in my question and this still doesn't do it. The font displays fine in IE6, just not IE7 and IE8 which makes me believe it is the way these are displaying the font. Nothing to do with the fade in problem... Any one have anymore ideas? Jan 19, 2010 at 20:26

7 Answers 7

11

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)

5

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);
3
  • True Story. The adding a background color fixes this problem. I used jquery to only apply a background color if the browser was IE8 or below so that it doesn't spoil the design of my site in other more capable browsers.
    – wilsonpage
    Nov 24, 2010 at 14:21
  • Finally someone has figured this out. This is the answer that I would have chosen. Worked for me. Also, all I had to do was apply a background via CSS to the item that was having the problem -- a one line change in my case.
    – Volomike
    Mar 30, 2011 at 3:18
  • This worked for me as well. All I needed to do was add the background color to the css style. I could not inherit or make the background transparent however and expect the text to smooth out. I'm using Jquery 1.3.5 to fade the text in and out. This might be fixed in later versions of Jquery. link
    – Mike T
    Apr 5, 2011 at 22:23
3

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

This link describes the problem

0
2

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/

0
1

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.

0
1

While waiting for a future version of jQuery, adding this before your script makes sure jQuery removes the filter attribute at the end of any opacity animation. (Via http://dev.jquery.com/ticket/6652)

This cleared the ugly fonts for me.

if ($.cssHooks.opacity.set) {
  $.cssHooks.opacity.defaultSet = $.cssHooks.opacity.set
  $.cssHooks.opacity.set = function(elem, value) {
    $.cssHooks.opacity.defaultSet(elem, value)
    if (!elem.style.filter.replace(/\ *(alpha\(opacity=100\))?/, ''))
      elem.style.removeAttribute('filter')
  }
}
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.