Open Bug 1997036 Opened 4 months ago Updated 3 months ago

background-clip: text fails to paint text decorations

Categories

(Core :: CSS Parsing and Computation, defect)

Product:
Core
Component:
CSS Parsing and Computation
Version:
Firefox 146
Platform:
All
macOS
Type:
defect

Tracking

()

People

(Reporter: percyley, Unassigned)

References

(Blocks 1 open bug)

Details

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36

Steps to reproduce:

Open:

data:text/html;charset=UTF-8,<!DOCTYPE html>
<style>
.test {
    font: 32px sans-serif;
    width: 13em;
    margin: 20px auto;
    text-decoration-line: underline;
    text-decoration-thickness: 3px;
    background-clip: text;
    background-image: linear-gradient(to right, red, blue);
}
</style>
<div class="test" style="color: transparent;">The text-decoration must have a gradient.</div>
<div class="test" style="text-decoration-color: transparent;">The text-decoration must have a gradient.</div>

Actual results:

The underline is gone.

Expected results:

Need to paint an underline with a gradient.

This is a quick way to draw a gradient underline, but unfortunately, only Safari currently supports it.

See: https://bugs.webkit.org/show_bug.cgi?id=179334
CSSWG issue: https://github.com/w3c/csswg-drafts/issues/900#issuecomment-342251900

Component: Untriaged → CSS Parsing and Computation
OS: Unspecified → macOS
Product: Firefox → Core
Hardware: Unspecified → All

Blink has implemented a preliminary fix here: https://issues.chromium.org/issues/362055819#comment7

Severity: -- → S3
Status: UNCONFIRMED → NEW
Ever confirmed: true
You need to log in before you can comment on or make changes to this bug.