Bug 150012 - Scroll Snap - Viewport jumps to top while another element is transitioning
Summary: Scroll Snap - Viewport jumps to top while another element is transitioning
Status: RESOLVED WORKSFORME
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: WebKit Nightly Build
Hardware: Mac OS X 10.11
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2015-10-10 22:48 PDT by Boyan
Modified: 2021-02-12 02:30 PST (History)
5 users (show)

See Also:


Attachments
Illustrating the scroll-snap bug. Hover on the white bar, then scroll down. (1.13 KB, text/html)
2015-10-10 22:48 PDT, Boyan
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Boyan 2015-10-10 22:48:34 PDT
Created attachment 262853 [details]
Illustrating the scroll-snap bug. Hover on the white bar, then scroll down.

If an element is in the middle of a CSS transition while scrolling and the element's transition duration is longer than the time it takes to scroll and reach the snap point, the viewport will abruptly jump to the very top.

Width, height and other complex transitions manage to trigger the bug every time, but it doesn't seem to happen on simple transitions such as colour changes.

The bug can be replicated in stable Safari 9.0 as well as the latest nightly (r190840 - 601.1.56).

Attached is a test case reduction. It's also available here: https://jsbin.com/qoqiwisuqu

To replicate the bug, just hover on the white bar, wait for the transition of the green span (expanding from 20% width to 100% width) and then scroll down while the span is transitioning back to its initial state.
Comment 1 Boyan 2015-12-13 21:43:29 PST
Is there any progress on this? Were you able to reproduce the issue?

As an additional note, this bug only happens while using a trackpad, but it doesn't occur when scrolling with a mouse.
Comment 2 Wenson Hsieh 2015-12-13 21:51:01 PST
Hi Boyan,

I've been able to reproduce this, and investigated it briefly. (Roughly) what's happening is that layout causes the active snap point of the scrolling container to reset to its old value (in this case, 0). I require further investigation before I can come up with a fix to this bug.

See also: http://whsieh.github.io/examples/scroll-snap-bug.html

- Wenson
Comment 3 Radar WebKit Bug Importer 2015-12-14 08:59:26 PST
<rdar://problem/23882017>
Comment 4 Boyan 2016-04-07 15:01:41 PDT
I just accidentally discovered the most bizarre fix to this problem.

Before the closing body tag, add this CSS which is supposed to disable/override the behaviour.

<style>body { -webkit-scroll-snap-type: none; }</style>

Instead, what happens is that the scroll snapping actually still works, but the bug disappears.

How is this even possible? Am I just sleep deprived and imagining things?
Comment 5 Brent Fulgham 2016-04-27 16:29:07 PDT
<rdar://problem/23066066>
Comment 6 Wenson Hsieh 2016-11-30 16:38:47 PST
Note: this doesn't seem to reproduce anymore after https://trac.webkit.org/changeset/209070
Comment 7 Martin Robinson 2021-02-12 02:30:44 PST
I think this has been fixed as a side-effect of the other change that Wenson listed above, so I'm going to close this bug. If it's still an issue, feel free to reopen this.