Bug 262287 – Interrupting scroll momentum causes container to not render

• Component: Scrolling
• Status: NEW

[Joffrey Jaffeux]

Created attachment 467958 [details]
video of the bug

Hi,

I created a very simple reproduction of this issue with instructions on this codepen:

https://codepen.io/joffreyjaffeux/pen/qBLKOLj

In the wild I have seen the web version of telegram suffering from this exact bug, AFAIK it's been here for a long time and has not been introduced in safari/iOS17, but is still very much present in this version. This is a very common issue for chat like applications.

Attached is a video of the bug you should see when using my demo.

Let me know if you need any more information.

[Radar WebKit Bug Importer]

<rdar://problem/116205365>

This also happens on macOS (Safari 17.4.1) when using a trackpad, but it's harder to trigger because inertial scroll is usually cancelled when moving the mouse after scrolling.

Here's a tweaked version of @Joffrey's pen with a horizontal-scrolling list with snapping enabled, which maintains scroll inertia while you move the mouse away to click the button:

https://codepen.io/tally-canva/pen/GRapBBa

Note the bug does NOT happen if you call `scrollTo` with `behavior: 'smooth'`.

On Chrome 125, calling `scrollTo` briefly flickers to the given top/left point and then returns to continue the original inertial scroll, effectively ignoring the `scrollTo`. This is not ideal and looks like it's tracked by this Chromium bug: https://issues.chromium.org/issues/40144061

On Firefox 126, calling `scrollTo` stops the inertial scroll and immediately scrolls to the given top/left point.

I've attached videos of the behaviour in Safari with and without smooth scrolling, and Chrome and Firefox.

Created attachment 471425 [details]
video of bug w horizontal snap - chrome 125

Created attachment 471426 [details]
video of bug w horizontal snap - firefox 126

Created attachment 471427 [details]
video of bug w horizontal snap - safari 17

Created attachment 471428 [details]
video of horizontal snap w smooth scrolling, NO bug - safari 17

[Tegan Churchill]

I just came across this same bug

I believe the bug only occurs when the scroll container is not the body element.

Repro with scrollIntoView: https://codepen.io/tegan/pen/gOVmooM?editors=1100

[Simon Fraser (smfr)]

I can't reproduce the bug with any of the codepens on iOS, but I can on macOS.

[Simon Fraser (smfr)]

Pull request: https://github.com/WebKit/WebKit/pull/42118

[Joffrey Jaffeux]

I can still repro on my first codepen on ios 18.3.1, just did it few minutes ago.

With the exact same steps I listed above:
- scroll
- while scroll momentum is happend click the scroll top button