Scroll to bottom doesn't work correctly in inactive tab

[mariia-mitiureva]

Describe the bug
Scroll to bottom doesn't work correctly in inactive tab - video

To Reproduce

1. Bookmark this storybook page https://inokawa.github.io/virtua/?path=/story/advanced-chat--default
2. Open it in a new tab (tab should be inactive while page is loading)
3. Go to that tab
   Result: list is not scrolled to the bottom

Expected behavior
Scroll to bottom works correctly in inactive tab

Platform:

• Browser: reproduced in Chrome and Edge, not reproduced in Safari
• Version of this package: 0.31.0

[inokawa]

It seems that ResizeObserver doesn't fire on non-active window in some browsers. Scheduled imperative scrolling waits for the resize events so timeout will happen.

As a workaround, you may be able to wait for the tab to be active with document.addEventListener("visibilitychange", callback) or else, and then call imperative scroll. Or maybe we should implement similar logic inside virtua.

[mariia-mitiureva]

Maybe support of initial scroll position (#415, #422) could solve the issue?
In the real project, where components are heavier than in storybook, this initial scroll to bottom sometimes is noticeable for user.

[inokawa]

#415 will not solve this issue, because #415 is just an unimplemented feature but this issue is a browser problem.

[mariia-mitiureva]

I understand. I guessed that if I had ability to set the initial scroll position without extra render cycle, maybe it wouldn't need to wait for resize events and the problem would go away.

[mariia-mitiureva]

A similar issue happens in safari if I switch pages back and forward by swiping. @inokawa do you have any idea why it can happen and how to fix it?

Screen.Recording.2024-07-10.at.12.34.42.mov

[inokawa]

Thank you for the report!
In the situation, window seems to be always active but scrollTo has timed out earlier than the initial resize. Maybe we should add a logic to wait for the initial resize and then trigger the scroll only on mount.

[inokawa]

Fixed in 0.33.3.