1590839 - Background is not clipped appropriately when using -webkit-background-clip: text and background-attachment: fixed on animated gif background

Status: RESOLVED FIXED

(Core :: Web Painting, defect, P3)

Description

[Ksenia Berezina [:ksenia]]

Attachment: 42577.html

As reported here https://github.com/webcompat/web-bugs/issues/42577

Steps to reproduce: in Firefox open https://codepen.io/FlorinPop17/full/eYYdQKz and observe behavior

Expected:
Text appears on top of the image

Actual:
Can't see the text

I've attached a reduced test case as well

Aslo if I remove background-attachment: fixed from .text-to-life element, the text appears.

Comment 1

[Markus Stange [:mstange]]

I think the testcase can be reduced some more. I'll try that now.

Comment 2

[Markus Stange [:mstange]]

Attachment: reduced testcase

The issue seems to be that -webkit-background-clip: text; is ignored if the background image is both an animated gif and fixed. Changing the background image to a png or to a gradient makes the bug disappear.

Comment 3

[Ksenia Berezina [:ksenia]]

hmm I've tried changing the image to be jpg or png, the text did not appear. So it's probably doesn't matter if the image is animated?

Comment 4

[Ksenia Berezina [:ksenia]]

Attachment: kittens

Comment 5

[Ksenia Berezina [:ksenia]]

Attachment: kittens.html

Comment 6

[Markus Stange [:mstange]]

Oh, I see, I think in my testcase it mattered because I had removed the background-size: cover. But with background-size: cover, it no longer matters whether the image is animated.

That implicates this code in nsDisplayBackgroundImage::CanOptimizeToImageLayer and indicates that ImageLayer creation is at fault somehow.