1996457 - "position: relative" disables "background-clip: text" on pseudoelements

Status: VERIFIED FIXED

(Core :: Web Painting, defect)

Description

[Coral]

Attachment: woie.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:145.0) Gecko/20100101 Firefox/145.0

Steps to reproduce:

1. Create an element
2. Add text to it, apply background-clip: text
3. Add a pseudoelement (::before, ::after) as a background (z-index: -1)

Here is the text CSS:

.bug {
width: 100px;
height: 100px;
background-color: aqua;
color: transparent;
background-clip: text;
position: relative;
}

.bug::before {
background-color: blueviolet;
content: '_';
position: absolute;
z-index: -1;
width: 100px;
height: 100px;
}

My Firefox:
Application Basics

Name: Firefox
Version: 145.0b6
Build ID: 20251024094404
Distribution ID:
Update Channel: aurora
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:145.0) Gecko/20100101 Firefox/145.0
OS: Windows_NT 10.0 26200

It also happens on mobile Nightly from Play Market

Actual results:

The background-clip stops working

Expected results:

The clipped text should overlay the pseudoelement, as it's always done in the past

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Web Painting' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Coral]

Forgot to mention in the reproduction steps:
2. Add text to it, apply background-clip: text, and apply position: relative

Unsure as to how to edit my description.

Comment 3

[Timothy Nikkel (:tnikkel)]

Can you upload the html file you are using as a testcase here as an attachment?

Comment 4

[Coral]

Attachment: bug.html

both elements should look identical. They look fine on Firefox release 144.0 and chrome latest

Comment 5

[Coral]

(In reply to Timothy Nikkel (:tnikkel) from comment #3)

Can you upload the html file you are using as a testcase here as an attachment?

I've uploaded an example 👍

Comment 6

[Emilio Cobos Álvarez [:emilio]]

https://hg-edge.mozilla.org/integration/autoland/pushloghtml?fromchange=76e329b118c8ad5ed6bbe5bde2534455c1b8a7ce&tochange=0c1ba181e55d86e199864234ba913b25a5adcd05

Comment 7

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 1996457 - Keep skipping out of flows for background-clip: text. r=tnikkel,#layout

Placeholder frames are leaves so they were always skipped for text
masks. This is a bit weird but alas, matches previous behavior and other
browsers.

Comment 8

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1990448

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/40c57cde8d87
https://hg.mozilla.org/integration/autoland/rev/4ec627072331
Keep skipping out of flows for background-clip: text. r=tnikkel,layout-reviewers

Comment 10

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/55710 for changes under testing/web-platform/tests

Comment 11

[amarc]

https://hg.mozilla.org/mozilla-central/rev/4ec627072331

Comment 12

[Timothy Nikkel (:tnikkel)]

Do we want to uplift this if there is still time?

Comment 13

[Emilio Cobos Álvarez [:emilio]]

Comment on attachment 9522830 [details]
Bug 1996457 - Keep skipping out of flows for background-clip: text. r=tnikkel,#layout

Beta/Release Uplift Approval Request

• User impact if declined/Reason for urgency: Regression that would be nice not to ship.
• Is this code covered by automated tests?: Yes
• Has the fix been verified in Nightly?: Yes
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: Comment 0
• List of other uplifts needed: none
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): One liner that restores previous behavior
• String changes made/needed: none
• Is Android affected?: Yes

Comment 14

[Pulsebot]

https://github.com/mozilla-firefox/firefox/commit/2d32800275ed
https://hg.mozilla.org/releases/mozilla-beta/rev/304a766df98c

Comment 15

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 16

[Alin Ilea, Desktop Test Engineering]

Reproduced the issue in Beta 145.0b7 and Nightly 146.0a1 (2025-10-28). Verified - Fixed in Beta 145.0b8 and the latest Nightly build 146.0a1(2025-10-30).