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: | P2 | 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: |
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 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 Created attachment 465083 [details]
Comparison: Chrome, Firefox, Safari
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>
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. :-) (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. Committed 264901@main (03b985167455): <https://commits.webkit.org/264901@main> Reviewed commits have been landed. Closing PR #14694 and removing active labels. EWS was wrong, and the fix didn't work - see bug 257832. Do we want to keep the change anyway, or to revert it? |
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; }