Akryum / vue-virtual-scroller

⚡️ Blazing fast scrolling for any amount of data
https://vue-virtual-scroller-demo.netlify.app
9.27k stars 885 forks source link

Items with images bounce when scrolling in DynamicScroller #776

Open umbrellait-arkady-chucvaga opened 1 year ago

umbrellait-arkady-chucvaga commented 1 year ago

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

umbrellait-arkady-chucvaga commented 1 year ago

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.