Akryum / Akryum/vue-virtual-scroller
DynamicScroller -> .scrollToBottom() causes infinite requestAnimationFrame recursion when enough unknown elements added
- 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.