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?