1689625 - Differences between Firefox and Chrome regarding text-decoration-* properties

Status: RESOLVED INVALID

(Core :: Layout: Text and Fonts, defect)

Description

[Nicolas Chevobbe [:nchevobbe]]

Attachment: firefox-chrome-side-by-side

This is an issue I saw when checking this demo: https://codepen.io/piccalilli/full/WNGBbpZ linked in this blog post: https://piccalil.li/quick-tip/add-scroll-margin-to-all-elements-which-can-be-targeted

Steps to reproduce

1. Click on the "Scroll to the target" link

Expected results

The underlined text is legible

Actual results

In Firefox, some of the text is covered by the underline (see the attached screenshot)

---

I'm seeing similar difference with the following document: data:text/html,<style>h1 {margin: 100px; text-decoration: underline;text-decoration-thickness: 2ex;text-decoration-color: cyan;text-underline-offset: -3ex;text-decoration-skip-ink: none;}</style><h1>Hello</br>World</h1>

Comment 1

[Jonathan Kew [:jfkthame]]

I think Chrome is wrong here, by my reading of the spec (and by reasonable author expectations).

If you set text-underline-position: from-font on the element, the Chrome rendering looks much like Firefox.

The initial value of text-underline-position is auto, which allows the browser to do whatever it likes. In Firefox, we treat auto the same as from-font, which is the behavior we've had for a long time.

In Chrome, it appears that the auto position gets adjusted in response to the thickness of the decoration, which I find a bit surprising, but I suppose they're within their rights to do that. Observe:

data:text/html,<h1><u style="text-decoration-thickness: 1px">test one</u> <u style="text-decoration-thickness: 10px">test two</u>

In Firefox (and Safari, FWIW), only the thickness of the underline changes; in Chrome its position also changes. That may simply be a bug, or it may be a deliberate decision (although if so, I think it's a questionable one). AFAICS it's not explicitly prohibited by the spec, given the auto value for text-underline-position, though it seems surprising to me.

However, there's more. These examples then use text-underline-offset to move the thick underline up "behind" the text. And here's where I think Chrome is clearly wrong, not just "different" within what the spec allows. It appears to be applying that offset from that auto position which it is varying in response to thickness. But the spec for text-underline-offset is explicit about the "zero position" from which the offset is measured: in the case of auto position, it is not measured from the browser's arbitrarily-chosen default position, which Chrome is varying here in response to thickess; the zero position is defined to be the alphabetic baseline, and thus should be independent of the decoration thickness.

Therefore, in an example like:

data:text/html,<h1><u style="text-decoration-thickness: 1px; text-underline-offset: 2px">test one</u> <u style="text-decoration-thickness: 10px; text-underline-offset: 2px">test two</u>

the spec is clear that both underlines should be drawn 2px below the alphabetic baseline. Chrome instead draws the second one considerably lower. (It looks like it's offset by half its thickness, at a guess.)

Comment 2

[Jonathan Kew [:jfkthame]]

I filed https://bugs.chromium.org/p/chromium/issues/detail?id=1172623 to report this as a bug in Blink.

Comment 3

[Jonathan Kew [:jfkthame]]

So AFAICS this is not a bug in Firefox; it's Chrome that is positioning the underline wrong in some cases.