(from beta.5) When using DynamicScroller in pageMode, the screen shakes when scrolling from bottom to top

teamboot88 commented 1 year ago

Describe the bug

Hello, @Akryum

First of all, thank you for providing such a great library. :) When using DynamicScroller in pageMode, there seems to be a bug where the screen shakes when scrolling from bottom to top. It appears that the height value is not being calculated correctly, and this only occurs when the height of the items is not constant.

This bug did not occur in versions up to v2.0.0-beta.4, but it has been present in all versions since v2.0.0-beta.5. https://github.com/Akryum/vue-virtual-scroller/releases/tag/v2.0.0-beta.5

Thank you for looking into this issue.

Reproduction

https://stackblitz.com/edit/nuxt-starter-sbaqep?file=app.vue

System Info

System:                                                        
    OS: Windows 10 10.0.19045                                    
    CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor            
    Memory: 39.92 GB / 63.89 GB                                  
  Binaries:                                                      
    Node: 16.19.0 - C:\Program Files\nodejs\node.EXE             
    Yarn: 3.4.1 - ~\AppData\Roaming\npm\yarn.CMD                 
    npm: 9.4.1 - C:\Program Files\nodejs\npm.CMD                 
  Browsers:                                                      
    Chromium (110.0.1587.56)
  npmPackages:
    vue-virtual-scroller: 2.0.0-beta.4 => 2.0.0-beta.4

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.

Oskar-Nilsen-Roos commented 1 year ago

I'm experiencing the same issue on beta.8, though I tried your stackblitz with beta.4 and it still seems to be jumping. Did you ever resolve this?

Genuifx commented 1 year ago

@Akryum Still reproduces on beta.8, especially when swipe up the page

Liuone commented 1 year ago

I'm down to 2.0.0-beta.3, solve the screen shakes.

srackhall commented 1 year ago

I have also encountered it, especially when scrolling up, which is very serious, resulting in a jump like blink.

srackhall commented 1 year ago

I'm down to 2.0.0-beta.3, solve the screen shakes.

I tried and there are still BUG.

After the rollback, there has indeed been an improvement on the mobile end, and there is basically no skipping.

However, in Windows, it did not work and still flickered and flickered.

Liuone commented 1 year ago

@srackhall My English is not good, so machine translation，My solution: 1.Height must be written fixed， You cannot transform or animate the height value. 2.Enable hardware acceleration. Here are two things you can try

srackhall commented 1 year ago

@srackhall My English is not good, so machine translation，My solution: 1.Height must be written fixed， You cannot transform or animate the height value. 2.Enable hardware acceleration. Here are two things you can try

多谢,, 我也是用的翻译软件哈。

不过, 我当天已经更改了页面结构, 暂时不再依赖pageMode, 因此, 我并没有继续尝试。如果后续可能再次用到pageMode的话, 可能此问题那时已经修复了。

感谢你提出的临时解决建议, 以及这次回复的后续建议

srackhall commented 1 year ago

@srackhall My English is not good, so machine translation，My solution: 1.Height must be written fixed， You cannot transform or animate the height value. 2.Enable hardware acceleration. Here are two things you can try

多谢,, 我也是用的翻译软件哈。

不过, 我当天已经更改了页面结构, 暂时不再依赖pageMode, 因此, 我并没有继续尝试。如果后续可能再次用到pageMode的话, 可能此问题那时已经修复了。

感谢你提出的临时解决建议, 以及这次回复的后续建议

Akryum / vue-virtual-scroller