search

inokawa / virtua

A zero-config, fast and small (~3kB) virtual list (and grid) component for React, Vue, Solid and Svelte.
https://inokawa.github.io/virtua/
MIT License
1.35k stars 49 forks source link

Scroll to bottom doesn't work correctly in inactive tab #450

Closed mariia-mitiureva closed 4 months ago

mariia-mitiureva commented 6 months ago

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:

inokawa commented 6 months ago

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 commented 6 months ago

Maybe support of initial scroll position (https://github.com/inokawa/virtua/issues/415, https://github.com/inokawa/virtua/pull/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 commented 6 months ago

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

mariia-mitiureva commented 6 months ago

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 commented 4 months ago

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?

https://github.com/inokawa/virtua/assets/37265338/beb6fbfe-309d-4ac3-9967-09566fcca6a4

inokawa commented 4 months ago

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 commented 4 months ago

Fixed in 0.33.3.