followOutput not working with fast updates

I was excited to learn about this library and set about trying to replace an existing chat solution, using a pretty basic Virtuoso container:

<Virtuoso
   data={props.messages}
   itemContent={itemContent}
   initialTopMostItemIndex={props.messages.length - 1}
   alignToBottom
   followOutput={true}
/>

It works like expected most of the time but when several new text items are added at once the textbox will not autoscroll until the user manually scrolls down to the bottom again. (Just as if the user had scrolled back.)

This is 100% reproducible in my current project, but when I tried to make a showcase where I did pretty much the same thing with adding multiple items at once, it works as expected! So it must be something more complex going on.

I’ve tried reducing the existing text html to simple unstyled divs and the problem still occurs, so it doesn’t seem to be related to the css. It also happens in all browsers tested (Chrome, Safari, iOS Safari).

I did a test where I delayed problematic client-side added texts to be added after 1 second instead of immediately, and that did make it work again, so it sure seems related to the speed at which new items are added.

If I set followOutput to a function that always returns true it also works as expected.

Any ideas what might be causing this? I had a look at the source to try to see how it checks if the text is scrolled to the bottom and saw that the state manager has something called debounceTime Could this cause problems when the html render hasn’t finished updating the layout before new data comes in?

[pranas]

I believe we are also experiencing the same issue. However, the flickering seems to only appear with two conditions: 1) the list cannot be full and needs to have padding 2) you have to adjust the browser zoom level to a certain level (typically out like 67%-90%). I will try to create a reproduction example. @petyosi did you see issues with browser zoom before? Could this be accounted for in calculations and fixed?

[OrcaXS]

I’ve met a similar problem. When a new item is added before the previous scrolling completes, scrolling will stop there and no longer following the bottom.

I’ve borrowed some code from the repo documents to make a reproduction. When appendInterval is 1000 and user.description’s length is 10 everything runs fine. Decreasing the interval to 500 while increasing user.description’s length to 2000 to make the list grows faster than scrolling, the list stops sticking bottom.

https://codesandbox.io/s/adoring-platform-1slp6