Pixels cropped with multiple text shadows and negative line spacing in Webkit

Question

I have a problem with multiple text-shadow and negative letter-spacing in Webkit where the last few pixels of the shadow on the last letter are cropped.

Well, only certain letters.

Check out this demo in Chrome or Safari (it works as expected in Firefox and Opera, as far as I can tell.)

I know that I could use -webkit-text-stroke , but this leads to this problem:

Any ideas? Thanks.

Answer 1

I found a solution, sort of.

Here is another demo .

If you reset   after the cropped letter, she corrects it. But this is not perfect.

I tried using a similar method with the :after pseudo-element, but it does not work.

Luckily for me, the text I'm trying to apply to this style is a pseudo-element, so it was easy to throw \00A0 into content:'' .

Answer 2

Yes, I would say that this is a drawing error. Webkit seems to allow the box around the letter to crop the shadow when you start using the negative distance between letters.

It was easier for me to see the problem by increasing the size and making display: inline to get a minimized frame around the letter.

http://jsfiddle.net/tMeuB/3/

Firefox

Starting from version 7.0.1

Pay attention to how the shadow remains when the distance from the minus letters increases from left to right.

Safari

Starting with version 5.1.1 (7534.51.22)

The same tests. See how the shadow is cropped as the distance between the letters increases. In frame 3, you can see how the algorithm computes it. I would suggest that clipping width = glyph width is the width of the glyph block.