2

There is a known issue with using jquery fadeOut, fadeIn, and fadeToggle, when fading some text which does not have a background color or image. (The text has green antialiasing thing going on during the transistion)

Take this for example. jQuery cycle: fading white text becomes "green" in Windows/Firefox/Cleartype Enabled

I have found recently that this happens using css 3 text-shadow too, unfortunately you cant set a background color on a text shadow, does anyone have any solutions or workaround for this?

Here is an example of the bug / issue

http://jsfiddle.net/blowsie/2UMJ4/

Update:

I have found one work-around which can be found in my answer below, any other solutions or workarounds , would still be great to know.

Community
  • 1
  • 1
Blowsie
  • 40,239
  • 15
  • 88
  • 108
  • 1
    Interesting, as the bug can be reproduced in an alternative way...[Demo](http://jsfiddle.net/dXJHL/)...I will consider this as browser bug? – vincicat Mar 01 '11 at 17:18

4 Answers4

1

I have just found one work-around which could be used in certain scenarios..

http://jsfiddle.net/blowsie/2UMJ4/8/

By using rgba opacity you can recreate certain colours and have the text-shadow fading without having the anti-aliasing issues.

text-shadow:50px 50px rgba(0,0,0,0.2);
Blowsie
  • 40,239
  • 15
  • 88
  • 108
  • 1
    Giving the color just a little bit of opacity also works and can probably be used everywhere without problems: `rgba(208, 208, 208, 0.99)`. I tried even less opacity (`0.999`), but that seems to be rounded back to 1, because it doesn't work any more. – RoToRa Feb 28 '11 at 13:40
  • There is obviously some in-consistencies between browsers and machines here as the rgba value that works for you , doesn't for me, w7 64bit firefox 3.6 – Blowsie Feb 28 '11 at 13:47
0

It doesn't seem to be a problem with jQuery, but a bug in the Chrome/Webkit, because it also happens when you directly give the element opacity.

Other than reporting it and avoiding it until it's fixed, I can't think of much you could do.

RoToRa
  • 37,635
  • 12
  • 69
  • 105
0

Like RoToRa said in a comment, you can can just lower the opacity of the color attribute to 0.99 using rgba. Here's a quick fix if you don't want to change all your color attributes. Works great for me

$('*').css('color', function(index, value) {
    return value.replace('rgb', 'rgba').replace(')', ', 0.99)');
});

Edit : Make sure you use this fix only for the browsers where you need it (which I believe is only Chrome) as older browsers do not support rgba.

Y0lk
  • 396
  • 5
  • 18
  • this seems like a very bad idea as you are replacing all colors to rgba, not all browsers support rgba - most versions of ie in particular – Blowsie Oct 27 '11 at 16:15
  • True. I edited it to specify to use it only for certain browsers ;) – Y0lk Oct 27 '11 at 17:46
-1

This code will fade out the element to invisible, then fade it back in. 

$('#button').click(function() {
    $('h1').css({'text-shadow':'none'}).fadeToggle('slow')
});

See this: http://jsfiddle.net/2UMJ4/10/

Eric Leschinski
  • 146,994
  • 96
  • 417
  • 335
Hussein
  • 42,480
  • 25
  • 113
  • 143
  • I want to fade the text-shadow. Not remove it and then fade the element, thanks tho – Blowsie Mar 03 '11 at 08:45
  • 1
    I think you are a little confused in regarding to the difference between fading and removing. They are practically the same. When you fade something out, it gets removed. In here we are setting shadow to none. We can assign it back a value as needed. Is this not what you need. It exactly how your example shows it. – Hussein Mar 03 '11 at 08:50
  • 1
    I want to fade the shadow not remove it. I wouldn't have started this question if i simply wanted to remove it , thanks anyhow – Blowsie Mar 03 '11 at 12:40