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
(3 files)
Comment 1•6 years ago
|
||
Updated•6 years ago
|
Updated•3 years ago
|
Comment 2•2 years ago
|
||
Here as this is still not working in Firefox 103.0b9.
Updated•2 years 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•1 year ago
|
Updated•1 year ago
|
Comment 4•5 months ago
|
||
Description
•