New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 686780 link

Starred by 1 user

Issue metadata

Status: Duplicate
Merged: issue 568847
Owner: ----
Closed: Feb 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug



Sign in to add a comment

repeating-linear-gradient with background-position: fixed won't render correctly in scrollable container

Reported by thomas.s...@ligadigital.com, Jan 30 2017

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.76 Safari/537.36

Steps to reproduce the problem:
1. create a div inside another div
2. give the outer div a set with and height and overflow: scroll
3. put a repeating-linear-gradient on the inner div and set background-position to fixed. Also give it a size greater than the outer div so you can scroll.
4. scroll to the right, after a while the gradient disappears and only one color is shown

What is the expected behavior?
The linear gradient should be shown for every scroll position

What went wrong?
The linear gradient is almost only visible for the area that was initially visible. If you scroll to the right for example, at one point the gradient switches to a fixed background color. Scrolling back into the initial area makes it appear again.

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 56.0.2924.76  Channel: stable
OS Version: OS X 10.11.6
Flash Version: Shockwave Flash 24.0 r0

A small reproduction can be found here: https://jsfiddle.net/vf8j42p3/
As you can see, when you scroll to the right, the background is only red, instead of red and white.
 
Screen Shot 2017-01-30 at 17.58.22.png
44.2 KB View Download
Components: Blink>Paint
Labels: Needs-Bisect
Status: Available (was: Unconfirmed)
Thanks for reporting this issue. The draw region for the gradient is clearly not accounting for the composited nature of the content.

This may be invalidation or maybe background painting.

Could we have a bisect to see if this is a new or old issue. Please bisect on Mac Retina. I would expect to find the patch that enabled composited scrolling on opaque backgrounds to show up as the cause on Windows or Linux, but Mac will tell us whether it is an old bug.
Cc: flackr@chromium.org

Comment 4 by ajha@chromium.org, Jan 31 2017

Labels: Needs-Triage-M56
Cc: kavvaru@chromium.org
Labels: -Needs-Bisect M-56
Able to reproduce the issue on Mac 10.12.2 Retina using chrome version 56.0.2924.76   and canary 58.0.2998.0.
This is non regression issue as the issue is seen from M30 old builds.
Labels: -Needs-Triage-M56
Able to reproduce the issue from M-30 so removing Needs-Triage-M56.
Cc: yigu@chromium.org
+yi, this looks similar to the background painting issue you were seeing on the root layer with root layer scrolling enabled.
Mergedinto: 568847
Status: Duplicate (was: Available)
Ah, looks like this is actually caused by  issue 568847 . We currently don't handle background-attachment: fixed correctly on composited scrollers - we should be invalidating as you scroll as we should also be doing with mixed attachment backgrounds.

Sign in to add a comment