Blank area when scrolling fast on thousand items

Hello !

On my app (Ionic 5) I implemented a list which contains ~ 6000 items (already loaded) as follow :

    <ion-virtual-scroll [items]="articles" class="mt-n2" approxItemHeight="84px">
      <ion-card *virtualItem="let article;" (click)="articleView(">
            <ion-img [src]="article.img" [alt]=" "> </ion-img>
          <ion-label class="ml-2">
            <h3>{{ article.nom }}</h3>
            <p class="text-body font-weight-bold">{{ article.numero }}</p>

When I’m testing on real device (smartphone android) and I scroll quite fast (down or up) the list area become BLANK and then after a short time (< 1 sec) my articles appear. This only when I’m scroll fast otherwise everything is okay.

I tried to remove the ion-img but the issue is still there.
I visited this topic : Blank area when scroll fast but the solution seems not fit to my case
I aslo made test with only 1k article but still the same

so if anybody have any idea I would really appreciate it

Thank you!

1 Like

have you manage to solve this ? I’ve same problem

Ionic’s built in virtual scroll is deprecated for Angular, React, and Vue projects. For angular, you should be using the CDK Virtual Scroller.