search

petyosi / react-virtuoso

The most powerful virtual list component for React
https://virtuoso.dev
MIT License
5.25k stars 301 forks source link

[BUG] Scrolling up causes a flicking in chrome and safari/iOS #723

Closed kazukinagata closed 2 years ago

kazukinagata commented 2 years ago

Describe the bug

Scrolling up causes a flicking on safari and chrome/iOS. Flicking seems to be especially noticeable if the list includes images. I don't get this problem with android or chrome/Windows.

Reproduction

https://codesandbox.io/s/laughing-lederberg-uc31wy

To Reproduce Steps to reproduce the behavior:

  1. Open the page.
  2. Scroll up.

Expected behavior

Scroll up smoothly.

Screenshots

https://user-images.githubusercontent.com/4246353/182093283-336ec4e3-cf6c-44f7-aa03-ee44cf56d27f.MP4

Desktop (please complete the following information):

Additional context

versions:

petyosi commented 2 years ago

I am aware of the problem but not of any possible solution. Mobile safari ignores scrollBy calls while scrolling is in progress, which means that the dynamic height compensation does not work. There's a workaround for that, but it does not come without flickering.

kazukinagata commented 2 years ago

@petyosi Appreciate your reply!

Yes, I saw https://github.com/petyosi/react-virtuoso/issues/598. Is the workaround you mentioned disabling Kinect in safari? I'm facing the issue with chrome as well as safari.