background-attachment: local doesn't behave correctly in Chrome mobile
Reported by
kaixi...@gmail.com,
Nov 17
|
|||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Steps to reproduce the problem: I was trying to use this CSS effect by Lea Verou in a project: http://lea.verou.me/2012/04/background-attachment-local/ Basically you create 4 backgrounds, 2 of which are radial-gradients with background-attachment: scroll and the rest are lineal-gradients with background-attachment: local. The idea is for the radial-gradients to act like shadows and the lineal-gradients to act as shadow covers. When you scroll the lineal-gradients should scroll along with the div, revealing the shadows beneath. Codepen: https://codepen.io/kaixi/full/yQoyJX/ What is the expected behavior? If you check the Codepen, when you scroll up and down you should see the respective shadows. What went wrong? This works in Chrome desktop but not Chrome mobile. Oddly, it works in Chrome desktop's devtools responsive mode, but only if you don't emulate a particular device. It works in Firefox btw. Did this work before? N/A Does this work in other browsers? N/A Chrome version: 70.0.3538.102 Channel: stable OS Version: OS X 10.14.0 Flash Version:
,
Nov 19
The shadows are not updated when scrolling with device emulation in Chrome desktop.
,
Nov 19
Unable to reproduce the issue on chrome reported version# 70.0.3538.102 using Mac 10.14 using below steps: 1) Launched chrome reported version and navigated to Codepen: https://codepen.io/kaixi/full/yQoyJX/ 2) Scrolled the page up and down, able to see the respective shadows 3) Opened Devtools responsive mode, scrolled the page up and down, able to see the respective shadows 4) Clicked some random device from drop-down, scrolled the page up and down, able to see the respective shadows @Reporter: Please find the attached screencast for your reference and let us know if we missed anything in reproducing the issue, provide your feedback on it which help in further triaging it. Thanks!
,
Nov 19
I believe we could have a bug in this area because there have been many changes recently, but I'm not able to reproduce the bug. You said this reproduces in chrome mobile, can you list the version (in chrome://version) and OS? I'm not able to reproduce this bug in chrome 70.0.3538.80 on Android 9.0.0 (pixel 3).
,
Nov 19
@#3: I think you missed the bug by a little bit by staying in the middle of the page :) If you scroll the page to the end you will see that the bottom shadow doesn't disappear as it should (because the lineal-gradient at the bottom should cover the shadow). As #2 said, the issue is that shadows don't update themselves. Please see my attached screencast.
,
Nov 19
@#4: I can reproduce this within devtools on Chrome 70.0.3538.110 (Official Build) (64-bit) on MacOS Mojave. And also on Chrome for Android 70.0.3538.80 (official Build) (32-bit), Android 7.0.0.
,
Nov 19
By toggling on and off the background property manually inside devtools, I can get the shadows to update. Please see this second screencast.
,
Nov 19
Youtube videos of the screencasts: https://www.youtube.com/watch?v=-u0jVm8HaJs https://youtu.be/uGtaVZBzqqo
,
Dec 3
This appears to be fixed in M-72. I verified broken in current Android Stable (M-70?) and working in Dev and Canary M-72. |
|||||||||
►
Sign in to add a comment |
|||||||||
Comment 1 by krajshree@chromium.org
, Nov 18