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?

[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.

[rik-iso]

#2 in @KarsonJo 's comment fixed this for me - or specifically, using the flag added in 4.9.0 mentioned in the linked issue

[Anusakthi]

Having Same issue of Reverse Scrolling Flickering/Jumping with Dynamic Height items still on latest version 4.12.3. Any Solution??
Expect this issue its Amazing to use virtuoso. Need Solution for ??

[petyosi]

You can open a new issue with a isolated reproduction of the problem you experience. Make sure that you read through this thread and ensure that you're not encountering any of the known problems above.

[Anusakthi]

Thanks for reply. I encountered same issue which was reported above Getting flickering of my dynamic height items while reverse scrolling. Is any fix version or Solution available for this issue?

[akacanet87]

I encountered a similar issue that the list bouncing when scrolling up.

I am using Virtuoso to implement a chat list, where each item contains either an image or text.

To test this, I used a random image from https://picsum.photos/seed/picsum/480/600, because my image height is fixed.

In every examples on Virtuoso’s homepage (https://virtuoso.dev/) I placed this code or random length text next to the item {index} text.

{index % 7 === 0 && (
  <img src="https://picsum.photos/seed/picsum/480/600" alt='' />
)}

Upon checking, I found that when there was only text, bouncing didn’t occur even if the item's height was over 600px.

However, when an image was present bouncing did occur.

As a result, I added a blank lines with the same height as the image for the items that contained an image in the chat list.

After doing that, the bouncing no longer occurred.

It might not be the perfect solution, but I hope this little hack helps others.

[petyosi]

#1083 (reply in thread)

[phazei]

This thread should have a link to here since it's pretty useful:

#1096 (comment)

It talks about the skipAnimationFrameInResizeObserver option which isn't well documented and helps flickering quite a bit.

It basically disables the change that was done in 4.7.6 which could produce some console errors, but makes flicker much less.

[n3r4zzurr0]

does it help reduce flickering on iOS too?

[tarunfy]

Thanks alot this has solved the flicker issue for me. I had the same issue of flickering when using virtuoso with dynamic content in a chat app.

After adding the skipAnimationFrameInResizeObserver prop the issue go resolved.

[fatemehkarimi]

Almost same issue here. what happens to mine is similar to this example. there is no skipAnimationFrameInResizeObserver prop in virtuoso grid.