Bug 196194

Summary: Fix the paint ordering of text decorations
Product: WebKit Reporter: Myles C. Maxfield <mmaxfield>
Component: TextAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Normal CC: jonlee, mmaxfield, ntim, sime.vidas, simon.fraser, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   
URL: https://drafts.csswg.org/css-text-decor-4/#painting

Description Myles C. Maxfield 2019-03-25 00:26:08 PDT
https://twitter.com/Oliver41618769/status/1109976355251412992

We might want to make it possible to put the underline behind text. We may even be able to make it the default because the underline is almost always the same color as the text, and doesn't have alpha.
Comment 1 Jon Lee 2019-04-09 10:53:31 PDT
+1. We also do something similar for spelling dots.
Comment 2 Radar WebKit Bug Importer 2019-04-09 10:53:48 PDT
<rdar://problem/49740867>
Comment 3 Šime Vidas 2021-12-12 19:48:13 PST
According to the CSS Text Decoration specification [1], text underlines should be drawn under (beneath) the text.

Test page: https://output.jsbin.com/yusuzed/quiet

In Chrome and Firefox, the text underline is drawn under the text, and the text’s descenders are fully visible. In Safari, the text underline is drawn over the text, and the descenders are completely covered by the underline and thus not visible.

Since the spec and other browsers agree on this, I suggest implementing this behavior in Safari as well.

[1]: https://drafts.csswg.org/css-text-decor-4/#painting
Comment 4 Myles C. Maxfield 2021-12-12 20:15:12 PST

*** This bug has been marked as a duplicate of bug 227445 ***