CSS3 Text Shadow & Opacity Bug - [fadeOut() / fadeIn() in Jquery]

There is a known issue with using jquery fadeOut, 开发者_JAVA百科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.

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

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.

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.

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/