Bug 249748 – Underlines are drawn on elements within a link even when those elements have text-decoration: none

• Component: CSS
• Status: RESOLVED DUPLICATE

[Alan Hogan]

Created attachment 464154 [details]
Desired rendering (FF screen shot)

A test case has been created here: https://codepen.io/alanhogan/pen/WNKbmVX

Notice the letters in the circles DO get underlined even though the CSS explicitly requests NO text decoration. Firefox is IMMUNE from this bug.

[Alan Hogan]

Created attachment 464155 [details]
Bugged rendering

[Radar WebKit Bug Importer]

<rdar://problem/103747168>

[Cameron McCormack (:heycam)]

Created attachment 464313 [details]
test

Here's a reduced test.  It's something about `display: inline-flex` that causes the underline to show.  If I change it to `display: inline-block` it doesn't show.

[Cameron McCormack (:heycam)]

Note that Chrome agrees with the Safari behavior.

[Alan Hogan]

1. Relevant Chrome bug is here: https://bugs.chromium.org/p/chromium/issues/detail?id=1403082

2. I agree `display` type does affect the bug. In my own testing right now, it seems that:

  - The bug always persists no matter the `display` type as long as the element is the child of a `display: flex` link.

  - When the element is the child of a non-flex link, then the only `display` value that seems to be immune to the underline bug is `inline-block` — in fact, you do not even need to remove the text-decoration from it.

3. This additional test page avoids flexbox: https://codepen.io/alanhogan/pen/RwBGVxP

4. I don’t understand how or why it would be expected behavior for underline styles to be forced on child elements of a link, when other text/font properties (such as font weight or size) can be changed at will. Is this perhaps an unintended consequence of privacy hardening?

[Ahmad Saleem]

Fixed with bug 258420

https://github.com/WebKit/WebKit/commit/1c13b5adb5e3ed5e11d75560a48c8e2ab21c855c

*** This bug has been marked as a duplicate of bug 258420 ***