Bug 268448 – Incorrect Rendering of Dashed Underline in WebKit

• Status: RESOLVED
• Resolution: FIXED
• Component: Layout and Rendering

[Mateusz Daniluk]

Created attachment 469626 [details]
red dashed is missing

I have encountered a rendering issue in WebKit browsers where the dashed underline beneath text does not display correctly. Specifically, the last dash of the underline does not render, even though there is ample space for it. This creates a visually truncated appearance, differing from the expected and consistent rendering observed in other browsers.

In contrast, Chrome seems to handle this differently by varying the empty space width based on the text width, leading to a more balanced and expected rendering. The issue in WebKit browsers looks like a cut-off in the underline, which is not present in other browsers.

## Steps to Reproduce:

Create an HTML file with the following content:

```html
<label for="" class="underline">Label</label>
```
Apply the following CSS:

```css
.underline {
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-thickness: 0.125rem;
}
```

https://codepen.io/ptu14/pen/mdoXQpX

Expected Results:
The dashed underline should be consistently rendered across the entire length of the text, similar to the rendering in browsers like Firefox or Chrome.

Actual Results:
The last dash of the underline is missing, creating an incomplete and truncated appearance.

[WS Work]

Created attachment 469627 [details]
Safari 15 & 16

I experienced same problem, looks like problem also in Safari 15 and 16, probably older versions also. Are there any chances to fix it in those browsers?

[Mateusz Daniluk]

Created attachment 469631 [details]
Dashed underline roboto font

That's even worse with Roboto font-family.

[Radar WebKit Bug Importer]

<rdar://problem/122030665>

[Mateusz Daniluk]

Pull request: https://github.com/WebKit/WebKit/pull/23838

[EWS]

Committed 276585@main (f4bc3800d06d): <https://commits.webkit.org/276585@main>

Reviewed commits have been landed. Closing PR #23838 and removing active labels.