List not showing enough elements when big differences in height

This is a bit of a special and maybe even contrived case, at least to the extent I did it, but this could lead to mistakes in more reasonable examples aswell.

Virtuoso doesn’t really handle big differences in height very well, when there is a sudden decrease in size.

<Virtuoso style={{ width: '100%', height: '400px' }} overscan={400} totalCount={200} item={(index: number) => {
            return <div style={{height: (index < 100 ? 200 : 20)}}>test {index}</div>;
        }} />

Since the first 100 items have a height of 200 Virtuoso assumes that height for all elements to begin with and once you scroll down to the items with a height of 20 it does not render enough items to fill the viewport.

I’m not sure if I’m doing something wrong or this is simply a limitation of the list.

[petyosi]

Got it, thanks for the repro steps!

[petyosi]

Published 0.12.4 and updated the example with it. You can see how the shorter items are re-filled with new ones.

A property that can improve the behavior in this case is defaultItemHeight - something which I consider.