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.28k stars 44 forks source link

Flickering on reverse scrolling when items have wide range of sizes in desktop Safari #362

Open inokawa opened 8 months ago

inokawa commented 8 months ago

As far as I researched, Safari seems to have 2 tricky behavior (maybe a kind of bug?):

  1. Imperative scrollTop update during scrolling sometimes delays. For example, setting scrollTop += 1000 will usually affect the next scroll event, however sometimes not next but after the next in Safari.
  2. Imperative scrollTop update during scrolling sometimes delays browser's paint. That means updated items range may not be painted immediately and can cause blank.

Originally posted by @inokawa in https://github.com/inokawa/virtua/issues/261#issuecomment-1925718938

LookRain commented 6 months ago

hi @inokawa just checking, have you been able to think of a solution to this problem? I think this is a common problem faced by other virtual scrollers like react-virtuoso..

inokawa commented 6 months ago

It's probably fixable by detecting desktop Safari by user agent and patching it. Previously I was looking for a more general solution, but it didn't work that time.

WalrusSoup commented 2 months ago

It's probably fixable by detecting desktop Safari by user agent and patching it. Previously I was looking for a more general solution, but it didn't work that time.

Can you share your thoughts & how should we approach this for vue?