1827412 - Background does not scroll when background-clip:text is used with background-attachment:fixed and a image/linear-gradient

Status: UNCONFIRMED

(Core :: Web Painting, defect)

Description

[Pier Paolo Ramon]

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

Steps to reproduce:

When an element has background-clip: text specified with an image or gradient as a background with background-attachment: fixed the resulting text does not move when scrolling the page.

You can find a minimal test case here: https://nodhtm.csb.app/

Tested on Firefox 111.0.1 on macOS.
User agent follows:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/111.0

Actual results:

While scrolling the page the background image and gradient stay in place.

Expected results:

While the background should be fixed on the page, the clip should move along with the text. In the linked test case you can see that this is what happens with a color background.

Chrome 112.0.5615.49 and Safari 16.1 (18614.2.9.1.12) expose the expected behaviour.

Comment 1

[BugBot [:suhaib / :marco]]

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

Comment 2

[BugBot [:suhaib / :marco]]

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

For more information, please visit BugBot documentation.

Comment 3

[Brian Peiris]

This is still an issue in Firefox 131. The bug affects this website in the wild, see scrolling behavior of the map on the right https://www.equaldex.com/region/united-states