text-shadow offset is different depending on side




Layout: Text
3 years ago
6 months ago


(Reporter: Pierre-Yves Gérardy, Unassigned)


38 Branch

Firefox Tracking Flags

(Not tracked)




3 years ago
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:38.0) Gecko/20100101 Firefox/38.0
Build ID: 20150513174244

Steps to reproduce:

Using several text-shadows to fake a text outline, offset in eight directions by the same amount (/sqrt(2) for the diagonals).


Actual results:

The border on top/right is thinner than on the bottom/left. Zooming out may make it more obvious.

Expected results:

A regular pseudo-border. It works fine in Safari and Chrome. No idea about IE.


Note that I use a JS-based CSS preprocessor. You can tweak the `outline()` call at the top to change the thickness and blur level (in milli-em). `outline()` is defined at the bottom of JS section.

The resulting CSS can be found in the head of the iframe, at the penultimate position.

Using milli-em allows me to get an outline that scales nicely, regardless of the text size.

Using OS X with a non-retina display.


3 years ago
Summary: text-shadow offset is uneven depending on side → text-shadow offset is different depending on side

Comment 1

3 years ago
No need to zoom out anymore, I reduced the font size and it gives the same result.

Comment 2

6 months ago
✨This has been fixed! ✨
You need to log in before you can comment on or make changes to this bug.