scrollToIndex leads to blank screen during inertia scroll on iOS Safari

[LookRain]

Describe the bug
Calling scrolLToIndex in middle of a scroll on iOS Safari has a very high chance of getting a blank screen

ScreenRecording_08-06-2024.12-48-28_1.mp4

To Reproduce

1. go to https://inokawa.github.io/virtua/?path=/story/basics-vlist--scroll-to
2. swipe to scroll and let the inertia scroll keeps going
3. click on scroll to

Expected behavior
Should scroll to intended target

Platform:
iOS Safari

• OS: [Windows, MacOS, Linux, Android, iOS]
• Browser: [Chrome, Firefox, Safari, Edge]
• Version of this package: [x.x.x]
• Version of framework: [react, vue, solid-js, svelte] [x.x.x]

Additional context
I understand this probably is because of the weird thing Apple does to the scroll behavior on Safari, but is there any possible workaround this issue, like stopping the scroll before firing scrollToIndex? @inokawa

[inokawa]

Current logic defers jump compensation in iOS Safari during scrolling and freezes visible range during imperative smooth scrolling in every browsers. So smooth scroll during inertia scrolling will cause weird behavior.

[LookRain]

actually it's not just smooth scrolling, in the video smooth option is false

[inokawa]

Oh, thanks. Maybe it's fixable if it happened without smooth option.

[LookRain]

@inokawa
I assume if I'm able to stop the scrolling before calling scrollToIndex, this wouldn't be an issue.

Any Virtua API i can use to stop the scroll? if no, would modifying the scroll container to overflow:hidden do the trick?

many thanks!

[inokawa]

would modifying the scroll container to overflow:hidden do the trick?

I think it is the only way in iOS Safari as far as I know. Or you can disable scrollTo button while scrolling for some use case.

[LookRain]

@inokawa
in your mind what would be the fix for this issue?

I'm thinking we can add a check for the scrollToIndex function, and disable scroll before the rest of the scroll logic.

if that is what you had in mind, I could try and submit a PR?

[inokawa]

Yeah, PR is welcome. I thought it may solve the problem to discard current jumps(maybe just call _flushJump()) when smooth scrolling started, but not tested yet.

For reference, Virtua locks visible range while smooth scrolling here:

virtua/src/core/store.ts

Line 434 in 63e9285

_frozenRange = getRange(payload);

virtua/src/core/store.ts

Lines 209 to 214 in 63e9285

	if (_frozenRange) {
	return [
	min(_prevRange[0], _frozenRange[0]),
	max(_prevRange[1], _frozenRange[1]),
	];
	}

[ArianHamdi]

@inokawa I assume if I'm able to stop the scrolling before calling scrollToIndex, this wouldn't be an issue.

Any Virtua API i can use to stop the scroll? if no, would modifying the scroll container to overflow:hidden do the trick?

many thanks!

Thanks for this amazing library @inokawa

I tried this trick and worked fine:

const chatContainer = document.getElementById(chatContainerId);
if (chatContainer && isIOS) {
  chatContainer.style.overflow = 'hidden';
  setTimeout(() => {
    chatContainer.style.overflow = 'auto';
    ref.current?.scrollTo(1e8);
  }, 0);
} else {
  ref.current?.scrollTo(1e8);
}

It would be great if we can have something like this in Virtua itself.

Also not sure if it is fine to use scrollTo(1e8) to scroll to the bottom of the list. 😬