1989862 - `background-clip: text` fails when content has large `transform: translate`

Status: UNCONFIRMED

(Core :: Web Painting, defect)

Description

[Matt]

Attachment: firefox-translate-background-clip-text.html

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:143.0) Gecko/20100101 Firefox/143.0

Steps to reproduce:

Apply a large transform: translate to an element with background-clip: text

Actual results:

The background is not visible.

Expected results:

The background is visible, clipped to the text.

Comment 1

[Matt]

Attachment: firefox-translate-background-clip-text-chrome.png

Comment 2

[Matt]

Attachment: firefox-translate-background-clip-text-safari.png

Comment 3

[Matt]

Attachment: firefox-translate-background-clip-text-firefox.png

Comment 4

[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 5

[Timothy Nikkel (:tnikkel)]

I think we are probably trying to apply the transform inside the display list builder that is used to build the mask for the text.

Comment 6

[Michal Čaplygin [:myf]]

I believe it's bug 1545128; there's an interactive test indicating that the "yeet distance threshold" is somewhat related to a total bounding box dimension of the element being translated.

Comment 7

[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.