В Webkit пиксели обрезаются несколькими текстовыми тенями и отрицательным межбуквенным интервалом

Question

У меня проблема с несколькими text-shadow с и отрицательным letter-spacing в Webkit, где последние несколько пикселей тени на последней букве обрезаются.

Ну, только определенные буквы.

Посмотрите на это демо в Chrome или Safari (работает как и ожидалось в Firefox и Operaнасколько я могу судить.)

Я знаю, что мог бы дополнительно использовать -webkit-text-stroke, но это приводит к этой проблеме:

Есть идеи?Благодаря.

Answer 1

Я нашел решение, вроде.

Вот еще одна демоверсия .

Если вы вставите   после обрезанной буквы, она исправит это,Но это не идеально.

Я пытался использовать похожую технику с псевдоэлементом :after, но она не работает.

К счастью для меня, текст, который я пытаюсьприменить этот стиль к , являющемуся псевдоэлементом, так что было легко бросить \00A0 в content:''.

Answer 2

Да, я бы сказал, что это ошибка рисования. Похоже, webkit позволяет рамке вокруг буквы обрезать тень, когда вы начинаете использовать отрицательный интервал между буквами.

Мне было легче увидеть проблему, увеличив размер и выполнив display: inline, чтобы получить свернутую рамку вокруг буквы.

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

Firefox

Начиная с версии 7.0.1

Обратите внимание, как тень остается при увеличении расстояния между отрицательными буквами слева направо.

Safari

Начиная с версии 5.1.1 (7534.51.22)

Тот же тест. Посмотрите, как тень обрезается при увеличении расстояния между буквами. В кадре 3 вы можете почти увидеть, как алгоритм его вычисляет. Я предположил бы количество отсечения = ширина глифа - ширина коробки глифа.