[css-scroll-snap] scrolling nested elements can freeze an ancestor scroll snap container between snap positions
Reported by
h...@jonjohnjohnson.com,
Mar 25 2018
|
|||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3379.0 Safari/537.36 Steps to reproduce the problem: Sorry this isn't all that reduced of a test case, but I'm guessing it doesn't need to be, to witness/dissect the issue. 1. Navigate to this url -> http://output.jsbin.com/gedurer/11 2. Click the blue header to cycle to the "pager--overlap" style of scrolling. 3. Scroll horizontally between pages 4. In a lackadaisical manner, try scrolling the individual pages vertically between the snapping of the horizontal snapping. 5. Notice the horizontal snapping will often freeze, and not at a scroll snap position. PS!!! It seems that the scrollWidth of the scroll snapped element sometimes has trouble knowing it can scroll. This is seen by the fact that you have to cycle to the "pager--overlap" state of the example. In Safari, you can scroll snap any of the states. In Chrome, it seems like one must cycle to other styles of scrolling first, to get scrolling triggered, then resize the window, and cycle back to the other styles of scrolling, to finally get the browser to understand that the pages always have the width to scroll horizontally. What is the expected behavior? Not to compare to safari, but it seems they have this figured out and the snapping will always ease to snap position, even when scrolling descendent scroll containers. What went wrong? Scroll snap behavior freezing when a scroll of descendant element begins. Did this work before? N/A Does this work in other browsers? Yes Chrome version: 67.0.3379.0 Channel: canary OS Version: OS X 10.12.6 Flash Version:
,
Mar 26 2018
,
Mar 27 2018
,
Apr 20 2018
From playing with this more, the issue highlighted in my "PS" seems to be caused by your... Add "implicit" rootScroller experiment - https://bugs.chromium.org/p/chromium/issues/detail?id=798719 If I have the edges of the scrolling container not match the edges of the viewport, that issue disappears.
,
Apr 25 2018
Hmm, I disable the implicit rootScroller using --disable-blink-features=ImplicitRootScroller and I can still repro the issue (on Linux).
,
Apr 25 2018
Though I don't have your tools at my disposal, when I simply add a 'margin:1px' to the '.pager' element, causing it's box to not match the viewport, it allows horizontal scrolling, where previously it is frozen. Again, this only refers to the "PS" in my original description.
,
Apr 25 2018
Ok - would you mind please filing a new bug with specific repro instructions for the case you're describing? Thanks!
,
Apr 25 2018
(And assign to me)
,
Apr 26 2018
,
Apr 26 2018
I can reproduce it in Safari as well.
,
Apr 26 2018
Similar filing for safari -> https://bugs.webkit.org/show_bug.cgi?id=184626
,
May 4 2018
|
|||||
►
Sign in to add a comment |
|||||
Comment 1 by ajha@chromium.org
, Mar 26 2018