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(article.id)">
        <ion-item>
          <ion-avatar>
            <ion-img [src]="article.img" [alt]=" "> </ion-img>
          </ion-avatar>
    
          <ion-label class="ml-2">
            <h3>{{ article.nom }}</h3>
            <p class="text-body font-weight-bold">{{ article.numero }}</p>
          </ion-label>
        </ion-item>
      </ion-card>
    </ion-virtual-scroll>

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 post - 1 participant

Read full topic