angular cdk virtual scroll keeps on jumping 2 rows above

Question

I have the following piece of code:

 @Input() set items(value) {
   if (value?.length) {
     this._items = value;
     this.cdkVirtualScrollViewport?.checkViewportSize();
     this.cdr.detectChanges();
   }
 }

 get items() {
   return this._items;
 }

<cdk-virtual-scroll-viewport
       [itemSize]="185"
       [maxBufferPx]="1100"
       [minBufferPx]="1100"
       class="cdk-viewport ion-content-scroll-host"
       #cdkVirtualScrollViewport
       (scrolledIndexChange)="loadMoreData($event)"
       
     >
       <div
         *cdkVirtualFor="let item of items; trackBy: itemTrackByFn"
         id="{{ item.id }}"
         class="viewport__instance"
       >
         <item-details
           [isMobileView]="isMobileView"
           [workOrder]="item.workOrder"
           [orderInfo]="item.orderInfo"
    
         ></item-details>
       </div>
     </cdk-virtual-scroll-viewport>

I have the itemsize set to 185 and the viewport__instance also has a height of 185px. When i start scrolling i am seeing a weird jumping behavior.

Any idea on what could be happening here?