AG Grid cells are not rendering correctly or go blank after scrolling

Hey I'm Using AG Grid For Showing Students records but when i scroll on right and come back on left data disappear from cells Before Horizontal Scrollenter image description here After Scroll Back To Start enter image description here here is my HTML

<ng-container *ngIf="rowData.length > 0">
<mat-card class="cardWithShadow theme-card" style="height:90vh !important;display : flex !important;flex-direction : column !important;">
<mat-card-content style="flex: 1 !important; display: flex !important; flex-direction: column !important;padding: 0 !important;">
<!-- The AG Grid component -->
<div style="flex: 1;min-height: 0;">
<ag-grid-angular
id="selectedOnly"
class="ag-theme-alpine"
style="width: 100% !important; height: 100% !important;"
[rowData]="rowData"
[columnDefs]="colDefs"
[defaultColDef]="defaultColDef"
[rowSelection]="rowSelection"
[gridOptions]="gridOptions"
(gridReady)="onGridReady($event)"
(firstDataRendered)="onFirstDataRendered($event)"
(bodyScroll)="onBodyScroll($event)">
</ag-grid-angular>
</div>
</mat-card-content>
</mat-card>
</ng-container>


onGridReady(params: any) {
// this.gridApi = params.api; // Save grid API reference
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;

this.gridApi.addEventListener('bodyScroll', (event: any) => {
// Example workaround: Force refresh visible rows
this.gridApi.refreshCells({ force: true });
});

// Optional: Auto-fit columns on load
setTimeout(() => {
this.gridApi.sizeColumnsToFit();
}, 100);
}

onFirstDataRendered(params: any) {
this.gridApi.sizeColumnsToFit();
}

1. I Already Try To Make Height And Weight Flexible by Using Flex (I Thought May Be This Issue Related To CSS).
2. I Added onGridReady , onFirstDataRendered.

Continue reading...