Bug 262287

Summary:

Interrupting scroll momentum causes container to not render

Product:

WebKit

Reporter:

Joffrey Jaffeux <joffrey.jaffeux>

Component:

Scrolling

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

david, jarek, joffrey.jaffeux, nmouchtaris, simon.fraser, tally, webkit-bug-importer

Priority:

Keywords:

HasReduction, InRadar

Version:

Safari 17

Hardware:

iPhone / iPad

OS:

iOS 17

Attachments:

Description	Flags
video of the bug	none
video of bug w horizontal snap - chrome 125	none
video of bug w horizontal snap - firefox 126	none
video of bug w horizontal snap - safari 17	none
video of horizontal snap w smooth scrolling, NO bug - safari 17	none

Description Joffrey Jaffeux 2023-09-28 01:28:13 PDT

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.

Comment 1 Radar WebKit Bug Importer 2023-09-28 15:18:12 PDT

<rdar://problem/116205365>

Comment 2 tally 2024-05-16 16:04:52 PDT

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.

Comment 3 tally 2024-05-16 16:05:38 PDT

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

Comment 4 tally 2024-05-16 16:05:51 PDT

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

Comment 5 tally 2024-05-16 16:06:09 PDT

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

Comment 6 tally 2024-05-16 16:06:49 PDT

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