2010569 - `background-clip: text` applied element loses background when moved with `transform: translate()`

Status: UNCONFIRMED

(Core :: Web Painting, defect)

Description

[shouu6]

Attachment: index.html

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

Steps to reproduce:

I opened the attached HTML file.
The page contains a text element styled with a background (gradient or image) clipped to the text using background-clip: text and a transparent text fill.
I then moved the text element horizontally by increasing the value of transform: translate().

Actual results:

In Firefox, once the element is translated beyond a certain distance, the background clipped to the text disappears completely.
The element continues to move and remains in the correct position, but the background is no longer rendered.
The translation distance at which this occurs is not fixed and varies depending on the font size of the text.

Expected results:

The background clipped to the text should remain visible regardless of the translation distance or the font size of the text, as it does in Chromium-based browsers such as Microsoft Edge.

Comment 1

[shouu6]

Attachment: Left: Firefox / Right: Edge

Comment 2

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

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

Comment 3

[shouu6]

Attachment: Left: Firefox / Right: Safari

For Safari, below style applied.

span.icon {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Comment 4

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

The severity field is not set for this bug.
:tnikkel, could you have a look please?

For more information, please visit BugBot documentation.

Comment 5

[Timothy Nikkel (:tnikkel)]

Probably same as bug 1989862. Probably we need to do something about dirty rects and some confusion about being pre or post transform.