Cdk Virtual Scroll

I’m working with Ionic 6 with Angular and Capacito3

As I scroll down the list, there are shots, where the elements suddenly slide upwards.
In my opinion, the problem occurs every few pixels that correspond to the value set in maxBuffer, in fact the lower the maxBuffer, the more it appears, but having a high maxBuffer means slowing down the application.

Do you know if there is a solution?


<cdk-virtual-scroll-viewport itemSize="{{itemSize}}" 
                                 minBufferPx="{{itemSize * 5}}"
                                 maxBufferPx="{{itemSize * 10}}">

         <!-- Here I have some components that need to scroll, 
                 like a slider and buttons -->

        <ion-card *cdkVirtualFor="let deal of deals"
                  style="padding-top: 0px; margin-top: 0px;">
                <!-- Here I have content item -->


I have the same problem. What I notice is that the more accurate the item size the less this problem occur. Even if the difference is .5px. Try not to use ionic components in the cdkVirtualFor and manually set the height of the component you’ll use it on.

I have added 15px and now its working fine :v:

I have added 15px because ion-card set auto margin, so i set margin-top 0px and margin-bot 15px and now work :muscle: