text-shadow offset is different depending on side

UNCONFIRMED
Unassigned

Status

()

Core
Layout: Text
UNCONFIRMED
3 years ago
6 months ago

People

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

Tracking

38 Branch
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

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).

http://codepen.io/anon/pen/gpLbdz?editors=001




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.
(Reporter)

Updated

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

Comment 1

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

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.