[BUG] Grid jittering/flickering

[schroda]

Found issue https://github.com/petyosi/react-virtuoso/issues/289 which looks similiar, but the trigger seems to be a bit different and it's also quite old

Describe the bug In case the grid items have a dynamic height and the grid height itself is not larger than its items, the grid starts jittering/flickering once the scrollbar just barely appears. The problem seems to be the scrollbar, that effects the width of the grid and thus, the height of the grid items. In case the browers scrollbar does not effect the width (e.g. firefox) or the height of the grid items is static, the issue does not occur.

Reproduction https://codesandbox.io/p/sandbox/peaceful-aryabhata-wfdl75

To Reproduce Steps to reproduce the behavior: (see video)

1. Open https://codesandbox.io/p/sandbox/peaceful-aryabhata-wfdl75
2. Decrease browser window height until the scrollbar just barely appears
3. See error

Expected behavior The scrollbar should appear without the grid going crazy

Video

https://github.com/petyosi/react-virtuoso/assets/50052685/39e8173a-65a1-4c28-a137-da785e67c412

Desktop:

• OS: Windows 11, Ubuntu 22.04.4 LTS.
• Browser: chromium
  • Microsoft Edge Version 124.0.2478.105 (Official Build) (64-Bit)
  • Google Chrome Version 125.0.6422.61 (Official Build) (64-Bit)

[petyosi]

That seems like a chicken and egg problem, but I think setting overflow: scroll should address it.