[css-backgrounds] Clarify the interaction of background-clip: text with the stacking context
Nobody has claimed this yet.
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- PR merge metrics
- PR metrics pending
Description
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:
Also, fixed/absolute values in Firefox can cause background-clip: text to fail, which needs further clarification.
See also
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the provided HTML example in Chrome, Safari, and Firefox, then review the linked Chromium issue and the CSS Backgrounds work associated with [css-backgrounds]. Done means the specification clearly defines how background-clip: text interacts with stacking contexts and fixed or absolute positioning.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend, web-dev
- Issue type
- Documentation
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100