Bug 276156

Summary:

text-decoration-thickness does not render properly with display flex or grid

Product:

WebKit

Reporter:

Sam Warnick <sam>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

fantasai.bugs, karlcow, koivisto, sgill26, vitor.roriz, webkit-bug-importer

Priority:

Keywords:

BrowserCompat, InRadar

Version:

Safari 17

Hardware:

All

OS:

All

Attachments:

Description	Flags
rendering in safari, firefox, chrome	none

Description Sam Warnick 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.

Comment 1 Karl Dubost 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>

Comment 2 Radar WebKit Bug Importer 2024-07-02 20:52:26 PDT

<rdar://problem/131020810>

Comment 3 fantasai 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

Comment 4 Karl Dubost 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