search

w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.49k stars 660 forks source link

[css-backgrounds] Clarify the interaction of background-clip: text with the stacking context #9563

Open yisibl opened 11 months ago

yisibl commented 11 months ago

Consider an example(from: https://bugs.chromium.org/p/chromium/issues/detail?id=1339290#c26):

data:text/html;charset=UTF-8,<!doctype html> 
<style>
    div {
        font-size: 36px;
        font-family: sans-serif;
        background-image: linear-gradient( red, blue );
        -webkit-text-fill-color: transparent;
         -webkit-background-clip: text;
        background-clip: text;
    }

    span {
        position: relative;
        border: 2px solid green;
    }
</style>

<div>
    <span>Hello word</span>
</div>

The current behavior of Chrome and Safari does not show text, which looks like a bug, and only Firefox is as expected. Considering that Chrome 120 removed prefixes, the specification needs to define a clear behavior as soon as possible.

Firefox:

image

Also, fixed/absolute values in Firefox can cause background-clip: text to fail, which needs further clarification.

Loirooriol commented 11 months ago

Also happens with opacity: 0.9, transform: scale(1) and contain: paint (may need display: block to apply). Or an integer z-index on a flex item.

yisibl commented 11 months ago

@Loirooriol Thanks for providing more cases, I think it basically fails as soon as the Stacking context is created.

Loirooriol commented 11 months ago

Yeah, in https://drafts.csswg.org/css-position-4/#paint-a-stacking-context, things that invoke "paint a stacking context" or "paint a stacking container" (except floats?)

yisibl commented 2 months ago

I see that WebKit is improving background-clip, which is exciting. @smfr Do you have any plans to fix this in WebKit?

cc @fantasai @LeaVerou @SebastianZ