Reverse Scrolling Flickering/Jumping with Dynamic Heights

[bukke101]

Hi, first of all, great library! Everything works perfectly except for one issue: when I scroll up, the list starts flickering/jumping. I have tried increaseViewportBy, overscan, and itemSize/measureElement, but the flickering is still there. Has anyone dealt with the same issue, and is there a workaround or anything that might help? Thanks!

[petyosi]

Can you provide more details and reproduction of the problem you observe?

[bukke101]

"Sure, I will try to reproduce the issue one of these days! Thanks!"

[KarsonJo]

I found two possible causes for the flickering.

1. itemContent has margin in the scrolling direction.
2. some itemContent changed size after fetching more data.

For 1, I can use padding instead of margin. For 2, I haven't found a good solution yet.

[brendanahart]

It happens for me with video if I'm scrolling fast at any time in reverse. I've played around with the same things you've mentioned and I still can't seem to figure it out

[brendanahart]

I'm wondering if any other developers have had this issue and would want to tackle it together. This specifically comes up in WkWebView. In my item content, I've eliminated all the margin that is vertical, make sure that item sizes do not change once content has finished loaded and ensured. I'm working with video along with a video player that uses progressive downloading which might be an issue. It seems the creator is busy with supporting sponsors and I'm simply financially unable able to make that commitment now

I'm using React 18+
WkWebView - iOS 17.5.1

Here is my code: nothing really specially going on other than I use pagination to retrieve more items because every item is pretty expensive to render.

I've also set increaseViewportBy top to 1440 and bottom to 360. After reading the docs about 100 times, I'm still unsure what the difference is between increaseViewportBy and overscan

<Virtuoso className="ion-content-scroll-host" data={exploreTricks} endReached={getMoreExploreTricks} increaseViewportBy={{top: overscanTop, bottom: overscanBottom}} itemContent={(index, item) => { return ( <HomeTrickCardContainer trick={item} isAuthed={isAuthenticated} isCapacitor={isCapacitor} userId={state.user?.auth_id} publicId={state.user?.id} trickId={item.id} userType={userType} path='explore' isScrolling={isScrollingExplore} scrollSpeed={scrollExploreSpeed}/> ); }} itemSize={customCorrectItemSize} components={{ Footer: ExploreFooterContainer, EmptyPlaceholder: EmptyListExplore, Header: ExploreHeaderContainer, }} logLevel={LogLevel.DEBUG} // Set the log level scrollerRef={(ref) => { console.log(Setting scrolling ref for explore: ${ref}); exploreScrollerRef.current = ref; }} isScrolling={setIsScrollingExplore} ref={exploreVirtuosoRef} rangeChanged={(range) => { console.log(Range changed for explore: ${JSON.stringify(range)}); setCurrentExploreTrickIndex(range.endIndex - 1); }} />

Anyways, that's it for me! Wondering if anyone else has had any issues?

[KarsonJo]

1. You can try replacing your video elements with other regular elements to make sure it's a virtuoso issue.
2. You can try downgrading virtuoso to 4.7.6 or below, the latest version seems to have some bugs with scrolling up. [BUG] InitialTopMostItemIndex causes variable height elements to blink/jump when scrolling up. #1096
3. Or you can take a look at this issue also for iOS (no solution unfortunately) [BUG] element disappearing when reverse scrolling in the ios #1094

[brendanahart]

Thanks for the reply, what seemed to help was not having any elements in my footer or header that could affect the list count. Along with that, I had no idea about the elements disappearing when reverse scrolling. It seems to happen also when I scroll really fast downward, but I saw there were some scroll placeholders that I could use. It would be nice to test out the MessageList component for free to see if this can fix an issue

[petyosi]

The reverse scroll elements glitch is solved in the MessageList. You can test it by implementing your web app, run it locally, and then access it through http://localhost... with your iOS simulator.

[brendanahart]

I appreciate you messaging me with the suggestion of the Message List, unfortunately, I just tried to implement it, and all of my video elements and card elements were all displayed over each other. I'm not sure if it can handle content that is dynamically sized. If there is a solution, I will support the project and purchase a license however I was unable to make it work after spending 4 hours on it

[petyosi]

You're encountering a known problem I believe. You need to ensure that loaded content like images, videos, etc has its width and height dimensions set upfront so that when the browser loads it, the item does not get resized.

Assuming we're talking about user content, you should store the dimensions in your database when the users upload the image/video attachments. Usually, the CDN services have such a feature.

Somewhat related: if your items can resize in response to user interactions, you should use the approach from the MessageList reactions example.