Items with images bounce when scrolling in DynamicScroller

[umbrellait-arkady-chucvaga]

trafficstars

Describe the bug

I have items, some with pictures, some without. When I scroll to the end of the list and then scroll to the top, I see bouncing items. It doesn't always happen, but often.

Reproduction

https://codesandbox.io/s/twilight-worker-blx0ej vue: 3.2.45 vue-virtual-scroller: 2.0.0-beta.7

Reproduced with: 2.0.0-beta.5, 2.0.0-beta.6, 2.0.0-beta.7

I am currently using 2.0.0-beta.4 and everything is fine with this version.

Video of issue: https://user-images.githubusercontent.com/85647729/207878030-a6e62cff-9f7b-48bb-a24e-da17d684b5b8.mov

System Info

System:
    OS: macOS 12.2.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 33.79 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.20.0 - /usr/local/bin/node
    Yarn: 1.22.11 - /usr/local/bin/yarn
    npm: 6.14.17 - /usr/local/bin/npm
  Browsers:
    Chrome: 108.0.5359.98
    Firefox: 107.0
    Safari: 15.3
  npmPackages:
    vue: ^2.6.14 => 2.6.14 
    vue-virtual-scroller: 2.0.0-beta.5 => 1.0.10

Used Package Manager

yarn

Validations

• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[umbrellait-arkady-chucvaga]

After some research, I found that the problem is related to DynamicScrollerItem: https://github.com/Akryum/vue-virtual-scroller/blob/1c772c5f5c6306036d154943e730d688cf98f08b/packages/vue-virtual-scroller/src/components/DynamicScrollerItem.vue#L88-L90

It looks like it sets the size of the element to the old size, then triggers ResizeObserver and brings the size back, which causes us to see some element jumping. I'm not sure what case this is supposed to fix, but it seems like an unnecessary application of size.