Google Chrome text shadow rendering

Question

@sebastian's fix may not work for old versions of Chrome.
Screenshot under Iron Browser (Chromium fork) v3.0.197.0:
                                                          
All the ones that have been assigned a shadow look the same and -webkit-font-smoothing has no effect as well as -webkit-text-stroke.

Instead, I've experimented until I've come up with this fix: http://jsbin.com/acalu4

tldr: add an innocuous 0 0 0 transparent, before your other shadow(s).

Known issues: some browsers can only handle 1 text-shadow. In order not to affect them (killing their only shadows) this should be applied via javascript only to Chrome.

the first part (technical workaround): Giving the text a thin stroke.

try this css, you might have to tweak the values to get the desired effect.

-webkit-font-smoothing: subpixel-antialiased; /* or antialiased; */
-webkit-text-stroke: .10pt black; /* or 0.01em might be better */

only webkit browsers (Chrome, Safari) read it, so it won't affect FF or IE.

play with an example here: http://jsfiddle.net/SebastianPataneMasuelli/NfmU7/6/

I found a solution for this. It seems to work in Safari 4+, Chrome (tested on 8.0x) and Firefox 3.5.

Try it:

text-shadow: 0px 0px rgba(0,0,0,0.75), 
             0px 1px rgba(0,0,0,0.75), 
             1px 0px rgba(0,0,0,0.75), 
             0px 0px rgba(0,0,0,0.75);