Open Bug 1571244 Opened 5 years ago Updated 2 years ago

Background-clip:text doesn't work when using multiple background layer and when the text layer is the top one

Categories

(Core :: Web Painting, defect, P3)

68 Branch
defect

Tracking

()

People

(Reporter: afif.temani, Unassigned)

References

(Blocks 1 open bug)

Details

User Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36

Steps to reproduce:

Here is a simple code to reproduce. I kept the wekbit prefix so we can compare with Chrome
HtML: <div class="box">some text</div>
CSS:
.box {
font-size:40px;
color:transparent;
background-image:
linear-gradient(red,red),
linear-gradient(yellow,yellow);
-webkit-background-clip:
text,
padding-box;
background-clip:
text,
padding-box;
}

A jsfiddle link: https://jsfiddle.net/wx3v5ct9/

Actual results:

The actual result is a red only background.

Expected results:

We should see a yellow background and the text in red. It works fine on Chrome.
It also works fine if the text layer is at the bottom, but we have to reduce the top layer to see it.

Example: https://jsfiddle.net/qwhz34en/


Here is two SO questions where I am using this technique that fail in Firefox:
https://stackoverflow.com/q/57251932/8620333
https://stackoverflow.com/q/56669587/8620333

Component: Untriaged → Layout: Text and Fonts
Product: Firefox → Core

The priority flag is not set for this bug.
:emilio, could you have a look please?

For more information, please visit auto_nag documentation.

Flags: needinfo?(emilio)
Status: UNCONFIRMED → NEW
Component: Layout: Text and Fonts → Web Painting
Ever confirmed: true
Flags: needinfo?(emilio)
Priority: -- → P3
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.