Bug 227282

Summary:

CSS text-decoration: underline for HTML details and summary does not work

Product:

WebKit

Reporter:

Russ <russ>

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

ahmad.saleem792, ap, bfulgham, hi, kizmarh, mmaxfield, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

BrowserCompat, InRadar, WPTImpact

Version:

Safari 14

Hardware:

Mac (Intel)

OS:

macOS 11

URL:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary

See Also:

https://bugs.webkit.org/show_bug.cgi?id=257752
https://bugs.webkit.org/show_bug.cgi?id=257832

Bug Depends on:

Bug Blocks:

252223

Attachments:

Description	Flags
CSS text-decoration: underline for HTML details and summary does not work in Safari but does in others browsers like Firefox	none
Comparison: Chrome, Firefox, Safari	none
Use case: underline summary to suggest that element is clickable	none

Russ

Reported 2021-06-23 01:23:40 PDT

Created attachment 432024 [details] CSS text-decoration: underline for HTML details and summary does not work in Safari but does in others browsers like Firefox CSS text-decoration: underline for HTML details and summary does not work in Safari (desktop, mobile and Tech Preview) but does in all the other browsers I have access to. HTML <details> <summary>Some Words...</summary> Some More Words... </details> CSS details { text-decoration: underline; border: 1px solid #aaa; border-radius: 4px; padding: .5em .5em 0; } summary { text-decoration: underline; font-weight: bold; margin: -.5em -.5em 0; padding: .5em; }

Attachments
CSS text-decoration: underline for HTML details and summary does not work in Safari but does in others browsers like Firefox (143.17 KB, image/jpeg) 2021-06-23 01:23 PDT, Russ	no flags	Details
Comparison: Chrome, Firefox, Safari (351.89 KB, image/png) 2023-02-20 04:07 PST, Vadim Makeev	no flags	Details
Use case: underline summary to suggest that element is clickable (176.18 KB, image/png) 2023-02-20 04:11 PST, Vadim Makeev	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Russ

Comment 1 2021-06-23 01:27:58 PDT

Goto https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary Add: text-decoration: underline to details or summary elements in Safari. details { text-decoration: underline; border: 1px solid #aaa; border-radius: 4px; padding: .5em .5em 0; } summary { text-decoration: underline; font-weight: bold; margin: -.5em -.5em 0; padding: .5em; } No underline - works in other browsers

Radar WebKit Bug Importer

Comment 2 2021-06-30 01:24:16 PDT

<rdar://problem/79955601>

Ahmad Saleem

Comment 3 2022-08-04 15:22:13 PDT

I am able to reproduce this bug with simpler test case in Safari 15.6 and Safari Technical Preview 150 on macOS 12.5: Link - https://jsfiddle.net/he9gb7us/ It works across all other browsers - Chrome Canary 106 and Firefox Nightly 105. It was fixed in Chrome in following commit: Link - https://chromium.googlesource.com/chromium/src.git/+/2c40398185c628f0f858f1838c879f9b81c8d3e7

Vadim Makeev

Comment 4 2023-02-20 04:07:16 PST

Created attachment 465083 [details] Comparison: Chrome, Firefox, Safari

Vadim Makeev

Comment 5 2023-02-20 04:11:04 PST

Created attachment 465084 [details] Use case: underline summary to suggest that element is clickable I have a design where expandable elements are underlined to suggest that they’re clickable. The only way to implement this is to wrap the text into a <span> <summary> <span style="text-decoration: underline"> Contents </span> </summary>

Ahmad Saleem

Comment 6 2023-06-05 11:21:28 PDT

Fixed it locally by just adding following in return function here: https://searchfox.org/wubkat/source/Source/WebCore/style/StyleAdjuster.cpp#167 && parentNode->parentOrShadowHostElement()->isMediaElement(); _________ Happy to do PR unless if someone think above is wrong way to fix it. :-)

Ahmad Saleem

Comment 7 2023-06-06 06:19:31 PDT

(In reply to Ahmad Saleem from comment #6) > Fixed it locally by just adding following in return function here: > > https://searchfox.org/wubkat/source/Source/WebCore/style/StyleAdjuster. > cpp#167 > > && parentNode->parentOrShadowHostElement()->isMediaElement(); > > _________ > > Happy to do PR unless if someone think above is wrong way to fix it. :-) Draft PR - https://github.com/WebKit/WebKit/pull/14694 Let's see what EWS has to say.

EWS

Comment 8 2023-06-06 09:28:39 PDT

Committed 264901@main (03b985167455): <https://commits.webkit.org/264901@main> Reviewed commits have been landed. Closing PR #14694 and removing active labels.

Alexey Proskuryakov

Comment 9 2023-06-12 22:23:40 PDT

EWS was wrong, and the fix didn't work - see bug 257832. Do we want to keep the change anyway, or to revert it?

Note You need to log in before you can comment on or make changes to this bug.