Akryum / Akryum/vue-virtual-scroller

DynamicScroller -> .scrollToBottom() causes infinite requestAnimationFrame recursion when enough unknown elements added

Open
#221 3 comments 8 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
10.8k
Forks
973
PR merge metrics
No merged PRs in 30d

Description

If there are enough elements with unknown size, the `.scrollToBottom()` function can skip a chunk of items, which will cause an infinite loop with `requestAnimationFrame(cb)` (https://github.com/Akryum/vue-virtual-scroller/blob/master/src/components/DynamicScroller.vue#L185).

Because of skipped items, line https://github.com/Akryum/vue-virtual-scroller/blob/master/src/components/DynamicScroller.vue#L182 will never be true (`this.$_undefinedSizes` gets stuck at n > 0), so it will never break.

Tested on:
(Ubuntu 18.04.2 LTS)
* Chrome - Version 73.0.3683.103 (Official Build) (64-bit)
* Firefox - 67.0 (64-bit)

This can be reproduced with the example project (https://github.com/Akryum/vue-virtual-scroller/blob/master/docs-src/src/components/TestChat.vue); by replacing https://github.com/Akryum/vue-virtual-scroller/blob/master/docs-src/src/components/TestChat.vue#L10 with a bigger number, let's say 150. The items will be added, but you will not be able to scroll the list.

A quick & dirty fix would be to replace the above-mentioned line (https://github.com/Akryum/vue-virtual-scroller/blob/master/src/components/DynamicScroller.vue#L182) with
`if (this.$_undefinedSizes === 0 || this.$_undefinedMap[this.items[(this.items.length - 1)].id] === undefined) {`, but this causes issues when scrolling up - skipped elements, can cause the list to jump.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.