New issue
Advanced search Search tips

Issue 825544 link

Starred by 3 users

Issue metadata

Status: Assigned
Owner:
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 3
Type: Bug

Blocking:
issue 497851



Sign in to add a comment

[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 description

UserAgent: 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:
 

Comment 1 by ajha@chromium.org, Mar 26 2018

Labels: Needs-Triage-M67
Owner: sunyunjia@chromium.org
Status: Assigned (was: Unconfirmed)
Blocking: 497851
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.

Comment 5 by bokan@chromium.org, Apr 25 2018

Cc: bokan@chromium.org
Hmm, I disable the implicit rootScroller using --disable-blink-features=ImplicitRootScroller and I can still repro the issue (on Linux). 


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.

Comment 7 by bokan@chromium.org, Apr 25 2018

Ok - would you mind please filing a new bug with specific repro instructions for the case you're describing? Thanks!

Comment 8 by bokan@chromium.org, Apr 25 2018

(And assign to me)
I can reproduce it in Safari as well.
Similar filing for safari -> https://bugs.webkit.org/show_bug.cgi?id=184626
Labels: -Pri-2 Pri-3
Summary: [css-scroll-snap] scrolling nested elements can freeze an ancestor scroll snap container between snap positions (was: [scroll-snap] scrolling nested elements can freeze an ancestor scroll snap container between snap positions)

Sign in to add a comment