Test's `text-decoration: underline;` is affected by the `vertical-align: -13px;` in Chrome and Safari but not in Firefox
Categories
(Core :: Layout, defect)
Tracking
()
People
(Reporter: cpeterson, Unassigned)
Details
(Keywords: parity-chrome, parity-safari)
Attachments
(2 files)
While planning my trip to Palm Springs on tripadvisor.com, I noticed that the text underline of an attraction's opening hours (e.g. " Closes in 10 min: 7:00 AM - 5:00 PM" or "Closed Now: See all hours") ran through the text in Firefox, but beneath the text in Chrome and Safari.
I've attached a small test case. The difference seems to be that the text-decoration: underline;
is affected by the vertical-align: -13px;
in Chrome and Safari, but not in Firefox.
The original page:
This is not a regression. I could reproduce as far back as Firefox 70 (2019) before macOS compat issues prevented older Firefox versions from running on macOS 11.2.3.
Reporter | ||
Comment 1•4 years ago
|
||
A screenshot of side-by-side comparison of the test page in Firefox 89, Chrome 89, and Safari 14 on macOS 11.2.3.
Reporter | ||
Updated•4 years ago
|
Comment 2•4 years ago
•
|
||
Seems like a bug in Chrome/Safari to me.
The spec is very clear about how underlines should be rendered:
https://drafts.csswg.org/css-text-decor-4/#line-position
See the text about "alphabetic underlines" there, especially the last sentence about non-initial vertical-align
.
See also Example 2 (a few paragraphs below), which demonstrates a case of non-initial vertical-align
.
Updated•3 years ago
|
Comment 3•3 years ago
|
||
The spec has an even clearer example here, fwiw:
https://drafts.csswg.org/css-text-decor-4/#text-line-constancy
Description
•