Bug 249748

Summary:

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

Product:

WebKit

Reporter:

Alan Hogan <webkit-bugzilla>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED DUPLICATE

Severity:

Normal

CC:

ahmad.saleem792, heycam, karlcow, ntim, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

BrowserCompat, InRadar

Version:

Safari Technology Preview

Hardware:

All

OS:

macOS 13

Attachments:

Description	Flags
Desired rendering (FF screen shot)	none
Bugged rendering	none
test	none

Description Alan Hogan 2022-12-21 14:21:48 PST

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.

Comment 1 Alan Hogan 2022-12-21 14:22:14 PST

Created attachment 464155 [details]
Bugged rendering

Comment 2 Radar WebKit Bug Importer 2022-12-28 14:22:15 PST

<rdar://problem/103747168>

Comment 3 Cameron McCormack (:heycam) 2023-01-03 12:45:05 PST

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.

Comment 4 Cameron McCormack (:heycam) 2023-01-03 12:47:09 PST

Note that Chrome agrees with the Safari behavior.

Comment 5 Alan Hogan 2023-01-04 00:08:23 PST

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?

Comment 6 Ahmad Saleem 2023-06-23 12:56:58 PDT

Fixed with bug 258420

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

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