Ionic 4 / Angular router transition and click lag on iOS devices

Ionic Framework Ionic Angular
1

I have an app with 11 pages in which the transition between two specific pages causes a very long lag time on the click event and a jagged transition to the next page. I have attached an example below. I have a list of 100+ cards with background images loading in on my home screen and the detail page each card transitions to causes the issue.

I have temporarily resolved the issue by disabling all animations in the app. The click is now immediate and the transition never happens so it isn’t a problem. This makes the app look less polished and I am wondering if someone knows how to disable animation only on one page instead of app-wide (using app.module.ts) or has seen a similar issue with Angular router transitions.

Here is my info:

Ionic:

   Ionic CLI                     : 6.1.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 4.11.10
   @angular-devkit/build-angular : 0.803.25
   @angular-devkit/schematics    : 8.3.25
   @angular/cli                  : 8.3.25
   @ionic/angular-toolkit        : 2.1.2

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0, ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 15 other plugins)

Utility:

   cordova-res : 0.9.0
   native-run  : 0.3.0

System:

   Android SDK Tools : 26.1.1 (/Users/user/Library/Android/sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 8.0.2
   NodeJS            : v12.15.0 (/usr/local/Cellar/node@12/12.15.0/bin/node)
   npm               : 6.13.4
   OS                : macOS Catalina
   Xcode             : Xcode 11.3.1 Build version 11C504

Here is the code on home.html

<div *ngIf="isLoaded === true">
    <app-events-card [eventsData]="eventsData"></app-events-card>
    <app-establishment-card
        *ngFor="let establishment of currentEstablishments"
        [establishment]="establishment"
        (click)="goToEstablishmentDetails(establishment['id'], establishment)"
      ></app-establishment-card>
  </div>

Here is the Establishment Card Component:

<ion-card>
  <div class="layer"></div>
  <img class="card-size" src="{{establishment?.image_location}}"/>
  <div class="card-title">{{ establishment?.name }}</div>
  <div class="card-subtitle">
    {{ establishment?.address }}
    <span *ngIf="establishment?.exprs?.distance"
      >| {{ establishment?.exprs?.distance | number: "1.2-2" }} miles</span
    >
  </div>
  <div class="card-special" *ngIf="special_happening_upcoming_text">
    {{ special_happening_upcoming_text }}
  </div>
</ion-card >
2

This sounds like precisely the reason virtual scroll was born. Have you tried using it?