Ionic 5 page div in ion-contents not scrolling on iphone

My app has a div element which holds an ion-slides item.
ion-slides has a number of ion-slide that slides horizontally. Below is my code

<ion-content [scrollEvents]="true">
        <div *ngFor="let item of (homePageSalons | async)">
          <ion-list-header class="ion-text-center">{{ item.name }}</ion-list-header>
          <ion-slides [options]="slideOptions">
            <ion-slide *ngFor="let salonItem of item.salons">
              <ion-card>
                <ion-card-content>
                  <ion-img [src]="salonItem.logo_url" *ngIf="salonItem.logo_url != 'N/A'" ></ion-img>
                  <p class="ion-text-center">{{salonItem.name}}</p>
                  <p class="ion-text-center">{{salonItem.address}}</p>
                  <ion-button (click)="navigateToDetailsPage(salonItem.salon_id)" class="ion-text-center" expand="block" shape="round"
                    size="medium">Book Now</ion-button>
                </ion-card-content>
              </ion-card>

            </ion-slide>
          </ion-slides>
        </div>
</ion-content>

Both vertical and horizontal scrolling works fine on android phone.
Problem: The vertical and horizontal scrolling does not work on all iPhone. What could be wrong?

Software versions:
ionic-framework - 5.x
Angular - 9.0.5