background-clip with multiple values fails when one value is text
Categories
(Core :: Web Painting, defect, P3)
Tracking
()
People
(Reporter: ana.tudor.lhnh, Unassigned, NeedInfo)
References
(Blocks 1 open bug)
Details
(Keywords: parity-chrome, parity-safari)
Attachments
(2 files)
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:61.0) Gecko/20100101 Firefox/61.0 Build ID: 20180621125625 Steps to reproduce: 1. Create a div. 2. Set two backgrounds on it: background: linear-gradient(thistle, purple), linear-gradient(brown, lemonchiffon); 3. Make the text transparent and set background-clip: text, border-box Actual results: The background-clip gets ignored (live test https://codepen.io/thebabydino/pen/yEKBJx ). Expected results: The background layer above should be clipped to the text. This is what happens in Chrome and Edge.
Comment 1•5 years ago
|
||
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:63.0) Gecko/20100101 Firefox/63.0 (20180809101613) I have tested this report using the latest Nightly and Firefox release build on Windows 10 x64 and OS X 10.12. I was able to reproduce the mentioned behavior using the steps above. When loading the provided test case the background layer should be clipped to text. However, this is not happening as it is in Chrome & Edge.
Updated•5 years ago
|
Updated•2 years ago
|
Comment 2•1 year ago
|
||
Here as this is still not working in Firefox 103.0b9.
Updated•1 year ago
|
I hit this again while working on something and following a hint (https://twitter.com/ChallengesCss/status/1706607046928338945), I started digging into it a bit more.
What seems to be happening in Firefox is the following: the top background layer image is painted all across the area of all the backgrounds stacked one on top of the other (can think of it as a union of sets).
This is incorrect. When the top background layer is the text
one, the top background-image
should only be painted in the text
area. This is what happens in Chromium browsers and in Safari.
Test case https://codepen.io/thebabydino/pen/oNJqrVd
This working correctly is essential for being able to get such a :hover
/ :focus
effect https://css-tricks.com/taming-blend-modes-difference-and-exclusion/#aa-text-state-change-effect on links without having to use a pseudo (which forces us to make the links inline-block
, which messes with natural wrapping).
Updated•3 months ago
|
Updated•3 months ago
|
Description
•