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.
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>
<rdar://problem/131020810>
Guessing we need to update this code here? TextDecorationPainter.cpp/ collectStylesForRenderer() https://searchfox.org/wubkat/source/Source/WebCore/rendering/TextDecorationPainter.cpp#323
There are multiple issues around this depending on the browser, the text and the font-size. https://codepen.io/webcompat/pen/mdYNjKa