Angular CDK Virtual Scroll with Ionic Grid – Items shuffle position when scrolling in grid view

I am using Angular CDK Virtual Scroll together with Ionic Grid to render a list of cards.

The requirement is:

• On mobile, show 2 cards per row.
• On tablet/desktop, show 3 cards per row.
• Support infinite scrolling with cdk-virtual-scroll-viewport.

Here is my code (simplified):

<cdk-virtual-scroll-viewport
(scrolledIndexChange)="elementScrolled($event)"
[itemSize]="gridItemSize"
[minBufferPx]="gridMinBuffer"
[maxBufferPx]="gridMaxBuffer"
class="ion-content-scroll-host"
*ngIf="!noData">

<ion-list>
<ion-grid *ngIf="sharedService.listingViewMode === listingView.Grid && !!searchdata.length"
class="browse-listing-card-container card-listing-grid-container">
<ion-row class="ion-no-padding"
*cdkVirtualFor="let row of chunkedSearchData; trackBy: trackByRowFn; let listIndex = index">

<ion-col [size]="12 / gridColumns"
*ngFor="let item of row; trackBy: trackByFn"
(click)="goToDetails(item)"
class="ion-no-padding grid-col"
[class.highlight]="item.Decorations.includes('Highlight')">
<app-lot-card [listing]="item"></app-lot-card>
</ion-col>

</ion-row>
</ion-grid>
</ion-list>
</cdk-virtual-scroll-viewport>

The problem


When I scroll down, the cards glitch and shuffle position:

• A card that should be on the left column may reappear on the right.
• Sometimes the same card re-renders in a different row.

This happens because I’m chunking my data (chunkedSearchData) into arrays of rows, then applying *cdkVirtualFor on the rows.

What I want

• A smooth, stable grid of 2 items per row on mobile and 3 items per row on larger devices.
• No shuffling or reordering when scrolling with cdk-virtual-scroll-viewport.

What I tried


I chunked my data into rows (chunkedSearchData) and applied *cdkVirtualFor on those rows.
I expected that each card would stay in its correct column (left/middle/right) while scrolling.

However, when I scroll down, some cards are re-rendered in the wrong position (e.g., a card that was on the left column may suddenly appear on the right or in another row).

Continue reading...