Feature request possible bug - last item on scroll up disappears

[ZelCloud]

Describe

I'm not sure if this is a bug, or if this should be a feature request.

The issue I'm running into is everything works fine except when scrolling up on a variable sized list. When I scroll up slightly the item at the bottom isn't rendered leaving a noticeable gap. Scrolling down is fine this seems to only be an issue when scrolling up. If this can be confirmed to be a bug I can try and create a minimum viable example.

If this is intended could we get a overscan property so we could tell the library to load an item or two extra outside of the visible viewport.

To Reproduce

Reproduce demo

Other

• Version 2.3.1 (latest)
• Browser chrome

[tangbc]

Did you mean render blank(missing item) when scrolling up at the bottom?

[ZelCloud]

No, I meant whenever I scroll up from any position (middle, bottom) some of the items at the end don't render.
Scrolling down at any position is fine and works 100% of the time. It's just when you start scrolling up sometimes the item or 2 at the bottom don't render.

Here's an example and some diagrams to hopefully make it clearer.

Example: list has 10 items we're starting scroll from the middle of the list.
NOTE: all items are variable size

Scrolling Down - All good
############   ############
#    4     #   #    5     #          
#    5     #   #    6     #          
#    6     #   #    7     #          
#    7     #   #    8     #          
############   ############

Scrolling Up - happens frequently (last item not rendered)
############   ############
#    4     #   #    3     #          
#    5     #   #    4     #          
#    6     #   #    5     #          
#    7     #   #          #          
############   ############

sometimes (last 2 items aren't rendered)
############   ############
#    4     #   #    3     #          
#    5     #   #    4     #          
#    6     #   #          #          
#    7     #   #          #          
############   ############

[tangbc]

@ZelCloud Is your device is MacOS or iOS?

[ZelCloud]

Nope, I'm on Windows, with Chrome version 85.0.4183.102.

[mdedirudianto]

Same here, my device is MacOS with Chrome.

My case is for chat app, when there is new message/change in the list, some messages at the end of the list disappeared. Need to scroll up and down to make them appear.

[souljorje]

Facing the same issue, MacOS, Chrome.
Changing keeps from 30 to 35 helped 🤷‍♂️

[GoldenCave]

@souljorje Nice, I can confirm I started seeing this issue when I had keeps set to a smaller number, like 10. Then scrolling up made the last items disappear.

@ZelCloud Try increasing keeps to a higher number, it is set at default 30, but in my case increasing keeps to 80 has helped.
(There is a secondary issue I was seeing where scrolling up after being at the bottom would only show a few elements and not load additional ones, and increasing keeps helped with this too.

[GoldenCave]

Just to elaborate further:
<virtual-list ... :keeps="80"

[souljorje]

@GoldenCave, I dunno, how it works but I think you should use odd number instead of bigger.

[GoldenCave]

Ok. So for my case actually estimate-size helped.. I was wrong since by increasing :keeps it appeared to help the problem since it then rendered the entire list at once, so that subsequent scrolls wouldn't run into the problem. But on huge lists (which is the point of this component), that approach is not correct.

[GoldenCave]

It is definitely worse on Chrome vs. Firefox, for some reason. I will try to reproduce in a way that is easily seen

[GoldenCave]

I took a deeper dive into the code. To summarize the problem, it appears that this occurs only with dynamic lists (where elements in the virtual list component are not all of the same size).
Specifically, the "jump" or case where the elements do not show when scrolling up seems to be a discrepancy where the estimate Size (the passed in or calculated height of the element) is used, but the offset and padding do not match the actual elements on the screen.
This leads to the padding both above and below the target region being inaccurate, so that only a smaller set of elements are displayed, which is confusing to the user.

I have not yet found a good solution, though locally when using the component I can prevent the bad behavior if I comment out the code within onItemResized , specifically this line, see link index.js:
this.sizes.set(id, size);