search

petyosi / react-virtuoso

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

[BUG] iOS17 infinite scroll displays blank screen #997

Closed tomicilija closed 11 months ago

tomicilija commented 11 months ago

Describe the bug Fetching new items (scrolling to top) does not display them. Instead it displays empty scroller. When you do another scroll items appear. This issue appears only on latest iOS17, other versions work just fine.

Reproduction Basic infinite scroll https://codesandbox.io/s/blue-leaf-3k6j89?file=/App.js

To Reproduce Steps to reproduce the behavior:

  1. Go to https://3k6j89.csb.app/ on iOS17 (either safari or chrome)
  2. Scroll to top to initiate new items load
  3. Scroller becomes blank (items are still there in elements in Chrome DevTools)
  4. Scroll again for items to appear again at start position (now with newly loaded items in the content)

Expected behavior Same as on the older iOS versions.

Screenshots

https://github.com/petyosi/react-virtuoso/assets/22974372/348bcb49-f52a-472a-a787-9625d0e7d1e8

petyosi commented 11 months ago

Managed to reproduce the problem - but honestly - no idea. As you pointed out, the elements are there, but the browser has decided not to render them.

In the distant past, the translate3d hack solved such "missing" items, but I'm not sure what's the up-to-date solution. Notice that, in general, reverse scrolling on iOS with uneven items is not a solved problem in Virtuoso, because mobile Safari ignores scrollBy compensation calls that are necessary when items with unexpected height are measured.

If you find a solution, let me know.

petyosi commented 5 months ago

I managed to solve this problem in the Virtuoso Message List.