Problem with jQuery's fade in/out in Firefox

Question

I already asked here with no luck, but feel free to read it:

http://groups.google.com/group/jquery-en/browse_thread/thread/fdf7a584b30d4bb9

Hmm check out my site:

http://www.crtaci.info/

on top-right position i have search field. When you move your mouse over there small text shows up that says:

Napredna pretraga

Now, for some reason those letters change color to like yellow for very short period of time in ff 3.5 and to some strange color in safari 4.0.2 for win. In ie8, opera and chrome it works just the way it should, white letters stay white during the animation.

Any sugestions?

here is function that do this job ;)

$('#header_search').hover(function() {
 $('#naprednaPretraga').stop({clearQueue:true}).show().animate({"opacity" : 1},500);
}, function(){
 $('#naprednaPretraga').stop({clearQueue:true}).animate({"opacity" : 0},500,function() {
  $('#naprednaPretraga').hide();
 });
});

Answer 1

I can see what you're talking about. On my machine (Vista Business 32-bit, FF3.5), it appears as though the yellowishness that is present during the fade is due to a combination of the ClearType trying to act on alpha-blended text and that you're fading white text through a blueish background. I know white + blue != yellow, but whatever FF does under the hood when rendering the transparent text, coupled with your OS, and a bazillion other things makes it seem yellow.

When I turn ClearType off on my machine, the yellowish seems to disappear, or is at least far less noticeable than with it on.

I'm afraid that you won't be able to control that with JavaScript code, but I would perhaps try what others have suggested: keep the text visible but fade it in from a blue that matches the background to white.

Answer 2

There are a couple of fixes that need to take place - This is an IE only bug that appears heavily on IE6 almost not in IE7 and slightly in IE8.

this site had some good guidelines to remove them: jQuery HowTo - Blogspot

The gist of it, is: - Add a matching background color to the element that receives the fade effect - Remove the filter attribute once the element has been faded in.

Answer 3

It's actually a Firefox (Cairo) bug https://bugzilla.mozilla.org/show_bug.cgi?id=363861 reported 3 1/2 years ago... Still ain't fixed.

Makes any text with opacity not equal to 1 or 0 get weird colored halos, not just with jQuery or JavaScript, but with CSS also. Not as noticeable with certain colors though. Seems worse with values close to 1 (.9999)

Answer 4

I ran into this on FF 3.5.9 with drop down menus fading out. I just added a background color to the parent container to fix it.

Answer 5

Specifying a background color on the actual text element will fix this.

If you have an image behind the text then create a background image for the text element that matches the far background.