scroll stuck bug on iOS Native devices

[827652549]

On iOS native devices, fill items with random heights, scroll a certain distance, and then return to the top and get stuck near the 1st or 2nd item.

This is a reproducible demo, you may need to run an iOS simulator on a real machine or through Simulator.

bug.mp4

You can clone https://github.com/827652549/mako-study-monorepo
pnpm install
cd virtual-list
npm run dev
...copy the url in Simulator iOS 
refresh, scroll , then back to top

Using iOS devtools, I found that I was executing into code inside the library, and I guessed that it was a problem with the logic of calculating this piece on an iOS device.

I tried to fix it by doing this

...git link

This is just a compatibility fix, but it may not be the best solution, expect a better one!

[oleggrishechkin]

Hi, @827652549 ,
First of all, thank you for the detailed issue description.

I want to describe why this hack with margin exists - ios can't change scroll position while already scrolling, so to avoid flickering/lagging/shifts of content we need to move elements somehow, and margin helps us to to it. But with margin we have another issue - the first item can be above scrollTop=0, so we need some margin reset logic. We need to perform scroll too, that's why we use overflow hidden hack.

I saw that you use smooth scrolling. It can cause an issue. Did you try to not use smooth scrolling?

[827652549]

HI, @oleggrishechkin,
I'm glad to receive your reply.😊

It's true that dropping scroll-behavior: smooth; would work perfectly on iOS Native, but my product manager on our team refused to drop smooth scrolling. Since this page is visited by 60k users per day, the good user experience is something we can't afford to give up.

After I released a bugfix version of the code above, which has been working well so far, I believe there is a lot of value to be gained If this code could be fixed perfectly

Do you have any plans to release a bugfix version to the library to make it compatible with this issue?

😁
By the way, I am very interested in the Design Concept of the library, is it possible to share some drawings of the principle of the library, the architecture of the introduction or the implementation of the concept? so that I can gain a deeper understanding of its inner workings and be involved in solving more complex problems in the future.

[oleggrishechkin]

@827652549 , about describing lib's desing somewhere - it's a good idea, I'll think about it and maybe I'll add some link to it or write it directly in readme. If you already have any questions about "how it works" you can create a discussion, I will be glad to answer.

About issue - scrolling to the item happened here, so we scroll (sync) and right after clear scrolling data. But if we use smooth scroll, scrollTop will be changed smoothy and new items will be appeared one by one and some virtualization will be happend too, includes setting margin-top. So we can't make smooth scrolling works perfectlly (on ios). Your fix isn't bad, but it works for scroll to first item only, but not for any other indexes. I have some ideas how to fix it (or better say do some compromise for ios).

[827652549]

@oleggrishechkin Glad to hear there is a new way to be able to fix it from your side, when will it be released please?

Also, Noticed that you did additional compatibility for touch devices (IS_TOUCH_DEVICE). Wondering what were the different characteristics of touch devices initially that made you do this compatibility from regular devices?

[oleggrishechkin]

@827652549 I'm not planning new releases right now. So you can safely keep your fork/fix. But feel free to contribute.

I added touch device check to support IOS. IOS safari prevent manual scroll changing (by setting scrollTop, for example) while scrolling, but I need to make some scoll when new items appeared to fix layout shifts. I created a hack with marginTop instead of setting scrollTop. So basically IS_TOUSH_DEVICE is an IOS check.