Bug 276156

Summary: text-decoration-thickness does not render properly with display flex or grid
Product: WebKit Reporter: Sam Warnick <sam>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED CONFIGURATION CHANGED    
Severity: Normal CC: ahmad.saleem792, fantasai.bugs, karlcow, koivisto, sgill26, vitor.roriz, webkit-bug-importer
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari 17   
Hardware: All   
OS: All   
Bug Depends on:    
Bug Blocks: 305077    
Attachments:
Description Flags
rendering in safari, firefox, chrome none

Sam Warnick
Reported 2024-07-02 16:16:11 PDT
Example: https://codepen.io/samwarnick/pen/ExzqLWp In the example I have 3 anchor elements all styled with text-decoration-thickness: 4px. Only the anchor element with display block (or inline-block) renders the thickness correctly. If display is flex or grid, it appears to render as the default 1px thickness. Seeing it in Safari 17.5 on macOS 14.5, but also same issue in Safari 18 beta on iPad OS. Renders as expected in Chrome and Firefox.
Attachments
rendering in safari, firefox, chrome (327.41 KB, image/png)
2024-07-02 20:51 PDT, Karl Dubost 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Karl Dubost
Comment 1 2024-07-02 20:51:42 PDT
Created attachment 471803 [details] rendering in safari, firefox, chrome Safari Technology Preview 197 20619.1.18 Firefox Nightly 129.0a1 12924.6.27 Google Chrome Canary 128.0.6572.0 6572.0 with the code in the example being <style>a {text-decoration-thickness: 4px;}</style> <a href="#" style="display: block">block</a> <a href="#" style="display: flex">flex</a> <a href="#" style="display: grid">grid</a>
Radar WebKit Bug Importer
Comment 2 2024-07-02 20:52:26 PDT
<rdar://problem/131020810>
fantasai
Comment 3 2024-07-03 10:03:19 PDT
Guessing we need to update this code here? TextDecorationPainter.cpp/ collectStylesForRenderer() https://searchfox.org/wubkat/source/Source/WebCore/rendering/TextDecorationPainter.cpp#323
Karl Dubost
Comment 4 2024-07-04 15:07:12 PDT
There are multiple issues around this depending on the browser, the text and the font-size. https://codepen.io/webcompat/pen/mdYNjKa
Ahmad Saleem
Comment 5 2024-11-25 15:14:01 PST
WebKit ToT (287067@main) matches Chrome Canary 133 on https://codepen.io/samwarnick/pen/ExzqLWp, so I think this issue seems to be fixed but as for Comment 04, still some differences in all browser engines.
fantasai
Comment 6 2026-01-07 15:59:21 PST
That's a different bug. Filed https://bugs.webkit.org/show_bug.cgi?id=305078. AFAICT this seems to work correctly now.
Note You need to log in before you can comment on or make changes to this bug.