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%5Fthread/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't reproduce the descriped error in ff3.5 and Safari 4.0.3 on Vista. Please post your javascript code, so we can think about possible explanation together. ;)

Answer 2

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 3

I have the same problem. I copied the code from a demo and for some reason it didn't quite work for me. The only difference was that I has blue links and the demo had black text. Try using black text, if you can.

Answer 4

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 5

Same problem here with a fade out of a gray text (#999999) on a white background, where the fade turns the text into a green or yellow color and at the end flickers black for some milliseconds. Happens only in Firefox 3.5 on Windows 7 (Vista as well, probably) and ClearType turned on.

Works in: Windows XP: Firefox, IE, Opera, Chrome Windows 7: IE, Opera MacOS: Safari, Firefox

After playing around with the font color, I found out, that when the text is dark enough (for me #333333), the effect disappears. Very strange behaviour. Is this bug known by mozilla?

Answer 6

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 7

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.