Bug 183157
| Summary: | [scroll-snap] scrolling against edge of iframe results in incorrect behavior | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | jonjohnjohnson <hi> |
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Normal | CC: | bfulgham, mrobinson, simon.fraser, wenson_hsieh, zalan |
| Priority: | P2 | ||
| Version: | Safari Technology Preview | ||
| Hardware: | Mac | ||
| OS: | macOS 10.12 | ||
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
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
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.