descendants that have vertical-align have misaligned text-decoration when it's set on an an ancestor that is not display: flex
Categories
(Core :: Layout: Flexbox, defect)
Tracking
()
| Tracking | Status | |
|---|---|---|
| firefox98 | --- | affected |
People
(Reporter: jon.maloto+BUGZILLA, Unassigned)
References
()
Details
Steps to reproduce:
See the following Stack Overflow post detailing the issue. It's still an issue in Firefox 98 (on Windows, at least)
Actual results:
If you have an element that has text-decoration: underline and a descendant element with text and set to vertical-align: middle (or super, maybe others too), the underline is rendered incorrectly.
Expected results:
When you set the parent element to display: flex, the underline renders appropriately. The value of vertical-align should not impact the text-decoration.
|
Reporter | |
Updated•3 years ago
|
|
|
Reporter | |
Comment 1•3 years ago
|
||
Forgot to paste the link:
https://meta.stackexchange.com/questions/344916/code-snippet-link-text-conflicts-with-underline-in-firefox
(In reply to jon.maloto+BUGZILLA from comment #0)
Steps to reproduce:
See the following Stack Overflow post detailing the issue. It's still an issue in Firefox 98 (on Windows, at least)
Actual results:
If you have an element that has text-decoration: underline and a descendant element with text and set to vertical-align: middle (or super, maybe others too), the underline is rendered incorrectly.
Expected results:
When you set the parent element to display: flex, the underline renders appropriately. The value of vertical-align should not impact the text-decoration.
|
||
Comment 2•3 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Layout: Flexbox' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
|
||
Comment 3•3 years ago
|
||
See explanations in bug 1584348 and various dupes. This is an example where Firefox behaves correctly (according to the CSS Text Decoration spec), but unfortunately Chrome's implementation is wrong, and sites that happen to depend on that incorrect behavior then end up looking bad in Firefox.
In essence, the snippet involved has
<a href="..."><span style="vertical-align:middle">link text</span></a>
which means we have an underline generated by the <a> element; then the text within the link has a different vertical-align setting that may (depending on the exact font/line metrics) shift the text such that it clashes with the underline.
Both Chromium and Webkit have open bug reports about this, because their behavior is quite simply wrong:
https://bugs.chromium.org/p/chromium/issues/detail?id=855589
https://bugs.webkit.org/show_bug.cgi?id=190772
Description
•