Bug 183157 – [scroll-snap] scrolling against edge of iframe results in incorrect behavior

• Status: NEW
• Component: Layout and Rendering

[jonjohnjohnson]

Could also be related to this bug on ios -> https://bugs.webkit.org/show_bug.cgi?id=135997
Here's a video showcasing the behavior described that issue -> http://cl.ly/pmvP

But for this issue...

On both safari 11 and technology preview 50, at least when document is within an iframe, starting a scroll in the direction towards the edge that is already been reached makes the scroll fly all the way to the opposite edge when just trying to go to next snap position.

Steps to reproduce:
1. Go to this url -> http://jsbin.com/subojom/8/edit?html,css,js,output
2. Scroll further up the output panel and without releasing (flinging) change your scroll direction (even a slight amount)
3. Notice the container scroll scroll (all too quickly) to the other end of itself.
4. Behaves like this when performed from the bottom edge as well.

Here's a video showcasing this issue -> http://cl.ly/pnD0

[Wenson Hsieh]

The iOS bug is a result of UIScrollView behavior, and isn't related to what you're seeing here.

On STP 50 running against macOS 10.13.4, I can reproduce this if I scroll downwards with any momentum while rubber-banding against the top edge of the scroll container. However, if I just let go without any momentum (i.e. without flinging) the scroll position rests at the top as expected.

[Wenson Hsieh]

Can you reproduce the bug with the same steps in main frame scrolling, and/or overflow scrolling? (e.g. https://whsieh.github.io/examples/scroll-snap-mainframe and https://whsieh.github.io/examples/scroll-snap-overflow, respectively).

[jonjohnjohnson]

I could not reproduce the bug with the same steps in either...

- https://whsieh.github.io/examples/scroll-snap-mainframe
- https://whsieh.github.io/examples/scroll-snap-overflow

Which led me to put both of those test case requests inside an iframe, and alas a wild bug appeared.

For the mainframe example, it completely disabled scroll-snapping.
For the overflow example, it reproduced the original described issue of this post.

[Wenson Hsieh]

Got it — thanks for the information!

[jonjohnjohnson]

Should I file another bug for the not snapping at all issue shown when the mainframe example is within an iframe?

[Wenson Hsieh]

(In reply to jonjohnjohnson from comment #5)
> Should I file another bug for the not snapping at all issue shown when the
> mainframe example is within an iframe?

Sure — though, I suspect these behaviors may have the same or similar root cause. If that is the case, we can dupe the other bug back to this one.

[Martin Robinson]

I can't seem to reproduce this bug any longer in the iOS simulator nor in Safari.