Upward compensation does not function correctly with Grouped Virtuoso

[kaylinkhanal10]

Describe the bug Virtuoso/ or Grouped Virtuoso flickers and returns back to original index while navigating to the bottom and then, scrolling upwards

Reproduction https://codesandbox.io/s/react-virtuoso-grouped-forked-z70upc

To Reproduce Steps to reproduce the behavior:

1. Use the default browser scroll and navigate to the bottom of the page (which should have- Group 200)
2. Now try to scroll upwards

Expected behavior let's say you have used default browser scroll and directly jumped to bottom of the pages, (Group-200 in our case). Then you try to scroll upwards and maybe you have reached Group-188, but on further scrolling up, you will again see items starting from(Group-194) (here group-194 is just an example. What it implies is you wont scroll from 188 to ->187,186,185,.. but will again return back to some few groups that were behind maybe again from 193,194,195,etc)

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS] - Windows as well as MAC
• Browser: shrome

Additional context In the code example, if the padding is less for the button, maybe 10px, the scroll works totally fine, but wont if the padding is larger

[petyosi]

Do you experience the same kind of problem with the flat component? I think this might be a problem with grouped mode.

[kaylinkhanal10]

Yes @petyosi experienced same problem with flat as well

[petyosi]

Can you replicate with flat? Thanks.

[kaylinkhanal10]

@petyosi on my local i can, but on sandbox, it's not rendering after some certain indexes. for flat, can you check this https://codesandbox.io/s/react-virtuoso-grouped-forked-lojr98?file=/src/App.js

[petyosi]

I believe that the setup probably exceeds the max size of an element in the browser.

[kaylinkhanal10]

@petyosi but even if we decrease it from 200 groups to let's say 30, the issue is still there. https://codesandbox.io/s/react-virtuoso-grouped-forked-l31555?file=/src/App.js OR if you increase the list size back to 200 but decrease the button padding from 100px to 10px it works fine.

[petyosi]

The last example you have posted has the following CSS which prevent it from functioning correctly:

        overflowY: "hidden",
        position: "unset"

[kaylinkhanal10]

@petyosi okay thanks for mentioning that, but even after removing that, the Upward compensation is not functioning correctly, even with much fewer data items. https://codesandbox.io/s/react-virtuoso-grouped-forked-l31555?file=/src/App.js

[petyosi]

It seems to function correctly with the latest version.

[kaylinkhanal10]

@petyosi if you scroll real slow it might. But if you move the scroll index directly to the bottom and more upwards bit faster, the issue exists: the group indexes repeat.

[kaylinkhanal10]

I believe that the setup probably exceeds the max size of an element in the browser.

and do we have any fixes(maybe any useful props) for this one if that's the case? @petyosi

[kaylinkhanal10]

@petyosi any leads on this ? It would be really great if we can fix this one. Our team is kind of stuck because of this performance issue.

[petyosi]

If your company is using react-virtuoso for your projects, consider sponsoring it. This will allow me to prioritize your support requests.

[williamstein]

If your company is using react-virtuoso for your projects, consider sponsoring it. This will allow me to prioritize your support requests.

I'm a different person, but just saw this -- I'm currently revamping https://cocalc.com to heavily use Virtuoso (instead of react-window or nothing) in this pull request. Our company is really small and not venture funded, so I'm just starting with a $20/month donation to you. However, I intend to increase it later as we grow hopefully in the next year or two.

I'm personally super impressed by Virtuoso and greatly appreciate what you've done @petyosi ! I don't foresee needing support, but just want to show appreciation.