Bug 150012 – Scroll Snap - Viewport jumps to top while another element is transitioning

• Component: CSS
• Status: RESOLVED WORKSFORME

[Boyan]

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.

[Boyan]

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.

[Wenson Hsieh]

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

[Radar WebKit Bug Importer]

<rdar://problem/23882017>

[Boyan]

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?

[Brent Fulgham]

<rdar://problem/23066066>

[Wenson Hsieh]

Note: this doesn't seem to reproduce anymore after https://trac.webkit.org/changeset/209070

[Martin Robinson]

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.