Akryum / vue-virtual-scroller

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

Missing elements after RecycleScroller is displayed #794

Closed fire1 closed 1 year ago

fire1 commented 1 year ago

Describe the bug

Initial page load, when the page is displayed one of the missing elements is shown and when the scroller is fully ready both are missing. I assume this is caused by the contents of the item but cannot determine why, once an item has this problem, no page refresh changes the view (the problem stays).

Here is the HTML, there is a gap between items. image

Here more missing image

Any suggestions on what I can log from the source code, I'm using a fork.

Reproduction

I'm not sure what cousin these gaps are, mostly all items have equal contents, any feedback on what to log from the source code will be appreciated.

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 Intel(R) Core(TM) i9-9900KF CPU @ 3.60GHz
    Memory: 15.99 GB / 31.92 GB
  Binaries:
    Node: 18.12.1 - D:\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 9.2.0 - D:\nodejs\npm.CMD
  Browsers:
    Chrome: 111.0.5563.33
    Edge: Spartan (44.22621.1265.0), Chromium (110.0.1587.50)
    Internet Explorer: 11.0.22621.1

Used Package Manager

yarn

Validations

fire1 commented 1 year ago

Found some strange overlapping by console.log on line 568:

SCR Proxy(Object) {item: Proxy(Object), position: 0, nr: {…}, offset: 0}
RecycleScroller.vue:568 SCR Proxy(Object) {item: Proxy(Object), position: 36, nr: {…}, offset: 0}
RecycleScroller.vue:568 SCR Proxy(Object) {item: Proxy(Object), position: 36, nr: {…}, offset: 0}[[Handler]]: Object[[Target]]: Object[[IsRevoked]]: false
RecycleScroller.vue:568 SCR Proxy(Object) {item: Proxy(Object), position: 72, nr: {…}, offset: 0}
261RecycleScroller.vue:568 SCR undefined
RecycleScroller.vue:568 SCR Proxy(Object) {item: Proxy(Object), position: 0, nr: {…}, offset: 0}
RecycleScroller.vue:568 SCR Proxy(Object) {item: Proxy(Object), position: 108, nr: {…}, offset: 0}
RecycleScroller.vue:568 SCR Proxy(Object) {item: Proxy(Object), position: 36, nr: {…}, offset: 0}
fire1 commented 1 year ago

There was an internal error for key identifier

fire1 commented 1 year ago

It was an internal error, keyField was duplicated...