How can I keep CSS3 text-shadow from overshadowing adjacent letters?

Question

Hi guys,

I am using a text-shadow effect on text that is rendered using WebKit. It works, but not well. I have white bolded text with the following setting for the text-shadow:

text-shadow: rgba(0,0,0,0.9) 0px 0px 10px;

You can see the unintended effect here (zoomed for detail).

You can see the shadow going over the previous letter, turning it gray. By the way, I've also attempted this using a straight RGB value for the color, so it's not an rgba()-related issue.

Have I done something wrong or is this expected behavior?

Mike

Answer 1

It appears that the following workaround seems to fix the issue:

-webkit-text-stroke: 0.1px transparent;