1313757 - background-clip: text does not work well with background-attachment: fixed

Status: NEW

(Core :: Layout: Text and Fonts, defect, P3)

Description

[Lanny Heidbreder]

Attachment: Demo of bad behavior when using fixed background with background-clip: text

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12) AppleWebKit/602.1.50 (KHTML, like Gecko) Version/10.0 Safari/602.1.50

Steps to reproduce:

Used background-clip: text and background-attachment: fixed on the same element to see the background image stay still as the backgrounded text scrolls by 


Actual results:

Strange behavior. On the site I'm developing, the entire element showed the background, instead of just the text, as though background-clip didn't work at all.

In the example file I'm attaching, the text itself acts like it is position: fixed; instead of the background being fixed.


Expected results:

The text should scroll by, and you should see the background remain motionless behind it

Comment 1

[Loic]

The issue is about the implementation of -webkit-text-fill-color used in the testcase.

https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=b45ee3e065b7c9defd8877d01fe948db18230c87&tochange=46b58297c2dee95fea660c3fae987fda7b3e36fb

Comment 2

[u459114]

It's about background-text:clip. I will check it.

Comment 3

[u459114]

Attachment: Bug 1313757 - (WIP) Paitially fix this bug when e10 is disable.

Review commit: https://reviewboard.mozilla.org/r/103310/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/103310/

Comment 4

[yisibl]

Seems to be the same reason:
https://bugzilla.mozilla.org/show_bug.cgi?id=1350663

Comment 5

[Виктор Виктор]

Also if set `background-size` to `cover` then background fills entire rectangle

Comment 6

[Jonathan Kew [:jfkthame]]

CJ, would you be able to get back to looking at this at all?

(Looking briefly at your WIP from last year, I suspect the issue with it -- the reason it was only a partial fix -- is really about async scrolling rather than directly an e10s/non-e10s issue. It's just that async scrolling is only used when e10s is enabled. The code in nsDisplayBackgroundImage has changed since then but I think the patch could be updated fairly easily; but offhand I don't know what is needed to make it work with APZ.)

Comment 8

[Paul_B]

Are there any updates regarding this?

Comment 9

[perree]

I just upgraded to Firefox 71.0 on the Mac and I am still seeing this issue. I would like to remove the workaround my site has specifically to handle firefox.

Comment 11

[Michal Čaplygin [:myf]]

Attachment: Testcase 2 - showing more background-clip/attachment/text-fill combinations

Comment 12

[Michal Čaplygin [:myf]]

Attachment: Screenshot of testcase 2 - page scrolled down by 11 display points.png

(Screenshot taken in Firefox 78.0.2 at Windows 10, 1dppx resolution. Outcome in Nightly from 2020-07-14 is identical.)

Comment 13

[Michal Čaplygin [:myf]]

bug 1543117 is even better report of presumably same issue, with most excellent testcase (but it's bug page seems nag infested).

Currently there are several famous CSS demos that unintentionally exhibits this bug, last one encountered is Adam Argyle's CSS Fixed Conic Fill (it has non-conic gradient fallback that sadly fails on this very exact bug) and perhaps this one by Valerii Ladomyriak.

There is also bug 1545128 that exhibits somehow similarly strange behaviour of background-clip: text - this time in conjunction with transform.

Comment 14

[Imanov]

Couldn't be that complex to fix this, right?

Comment 15

[Ana Tudor]

Attachment: theme switcher issue in Firefox

This is still a problem in 2024. Simplified test case I made before doing a search here made this bug pop up.

I hit it while coding a swipe theme switcher (attached video) with no content duplication. This theme switcher relies on using fixed gradient backgrounds (simplified version illustrating the idea). When there is enough text content to scroll, I hit this bug in Firefox.

Comment 16

[Imanov]

I commented 3 yrs ago, and commenting again: still not fixed. 8 yrs - how can it be this hard?!

Comment 17

[Jeff Muizelaar [:jrmuizel]]

It looks like this is an invalidation problem. When you click the text or unfocus the window it paints properly.

Comment 18

[Michal Čaplygin [:myf]]

It looks like this is an invalidation problem. When you click the text or unfocus the window it paints properly.

For me just unfocussing the window or only clicking at the text is not enough; to force proper repaint I have to select the text content (where it really is, not where its "ghost" is shown at the moment), or switch to other tab and return back. (This is actually creepily amusing, since it feels like ghost that moves only when I am not looking, or turns visible only when grasped :].)

Comment 19

[Jeff Muizelaar [:jrmuizel]]

I talked with mstange about this and we came to the conclusion that only reasonable way forward is switch to using a WebRender mask for the background and have WebRender scroll things properly. We should be able to add the text mask to the clip.