1543117 - Background-clip: text doesn't scroll properly with background-attachment: fixed

samuel

Reporter

Description

•

5 years ago

Attached file mcve-background-image-background-attachment-fixed-background-clip-text.html — Details

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:66.0) Gecko/20100101 Firefox/66.0

Steps to reproduce:

Create an element with text content (tested with DIV and SPAN)
Add a background-image to said element (tested with gradient and SVG)
Set the background-clip property of said element to text
Set the background-attachment property of said element to fixed
Now scroll

Actual results:

It works fine until you apply the last step. When you scroll the background doesn't appear to be updated at all. The example illustrates how the text moves, but the background doesn't appear to be redrawn. Leaving behind what looks like a shadow of the text itself (clipped by the bounding box of the element).

Expected results:

The clipped background should remain invisible (hidden behind the actual text), it should scroll along and be updated accordingly.

Alice0775 White

Updated

•

5 years ago

Component: Untriaged → Layout: Block and Inline

Product: Firefox → Core

Alice0775 White

Updated

•

5 years ago

Keywords: regression

Emilio Cobos Álvarez (:emilio)

Comment 1

•

5 years ago

Don't you also need color: transparent in order for the background to be visible?

With that I can see the bug. Thanks for the report.

Status: UNCONFIRMED → NEW

Component: Layout: Block and Inline → Web Painting

Ever confirmed: true

Comment 2

•

5 years ago

Regression window with layout.css.background-clip-text.enabled = true
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=66c438e0cb1f0c3aefe1bedd1862eb206b766920&tochange=7baeeb594c97bf30c780108f7ce6e0bb2c458cb3

Triggered by: Bug 759568

Component: Web Painting → Layout: Text and Fonts

Regressed by: 759568

Emilio Cobos Álvarez (:emilio)

Updated

•

5 years ago

Component: Web Painting

No longer regressed by: 759568

Summary: Background-clip: text doesn't scroll properly with background-attachment: fixed and background-clip:text → Background-clip: text doesn't scroll properly with background-attachment: fixed

Emilio Cobos Álvarez (:emilio)

Comment 3

•

5 years ago

(In reply to Alice0775 White from comment #2)

Regression window with layout.css.background-clip-text.enabled = true
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=66c438e0cb1f0c3aefe1bedd1862eb206b766920&tochange=7baeeb594c97bf30c780108f7ce6e0bb2c458cb3

Then not a regression, since that is the initial implementation of the feature. Thanks a lot for figuring out the regression range Alice :)

I've moved it back to Web Painting since it's likely where it belongs.

Keywords: regression

samuel

Reporter

Comment 4

•

5 years ago

(In reply to Emilio Cobos Álvarez (:emilio) from comment #1)

Don't you also need color: transparent in order for the background to be visible?

With that I can see the bug. Thanks for the report.

I had that in my original code but stripped it since it seemed to more clearly illustrate how the text would move while the background wouldn't update... Sorry if that ended up being more confusing than it could have been!

Also thanks guys for processing the reports so quickly <3