Akryum / Akryum/vue-virtual-scroller

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

Abierto
#221 3 comentarios 8 reacciones 0 asignados Ver en GitHub
bug
Lenguaje dominante
TypeScript
Estrellas
10.8k
Forks
973
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

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.

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.