RESOLVED CONFIGURATION CHANGED276156
text-decoration-thickness does not render properly with display flex or grid
https://bugs.webkit.org/show_bug.cgi?id=276156
Summary text-decoration-thickness does not render properly with display flex or grid
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
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
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.