Animation on page transition on iOS is broken

Bug Report

Ionic version:

[x] 4.x

Current behavior: Page transition is breaking on iOS. Android is working good.

Expected behavior: Transition smooth onto next page.

Steps to reproduce:

Related code:

Typically I’d use this.navCtrl.navigateForward(['route', id]); to navigate to the next page, but 90% of time the animation would stop.

Other information:

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.10.3 (/Users/andjelicnikola/.nvm/versions/node/v10.7.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.2
   @angular-devkit/build-angular : 0.11.4
   @angular-devkit/schematics    : 7.2.2
   @angular/cli                  : 7.2.2
   @ionic/angular-toolkit        : 1.2.1

Cordova:

   cordova (Cordova CLI) : 7.1.0
   Cordova Platforms     : android 7.1.0, ios 4.4.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 23 other plugins)

System:

   ios-deploy : 2.0.0
   NodeJS     : v10.7.0 (/Users/andjelicnikola/.nvm/versions/node/v10.7.0/bin/node)
   npm        : 6.8.0
   OS         : macOS Mojave
   Xcode      : Xcode 10.1 Build version 10B61

[liamdebeasi]

My current guess is the performance issue you were seeing is actually related to this bug in WebKit: https://bugs.webkit.org/show_bug.cgi?id=201048

Animations in the Shadow DOM tend to freeze/be janky when the layout is invalidated. In this case Node.insertBefore causes the issue. Unfortunately, Angular can sometimes call that when evaluating an ngIf, so the issue is easier to dig up in Angular apps.

I am discussing with the team as to whether there may be an appropriate workaround we could go with for now.

[etonyali]

This is happening because you are assigning subscription variables and/or subscribing in ngOnInit(). I was able to overcome this issue by using ionViewDidEnter() instead of ngOnInit(). However, when you do this, the page looks empty at first. If you don’t want that, you can use ghost elements to fill out the page and then when your API comes through, just display the correct items.

Addition: I didn’t know ionic already has something similar to ghost elements. Please see https://ionicframework.com/docs/api/skeleton-text

If anybody wants to reproduce the problem, just assign an API subscription to a value in ngOnInit() then subscribe it in the ion-content ngIf with async.

In my case, it was:

TS:

ngOnInit() {
 this.subCategoryData$ = this._fireStoreService.getExampleData();
}

HTML:

<ion-content padding>
  <ng-container *ngIf="subCategoryData$ | async as category$">
    <div class="content-header">
      <div class="page-title">{{ category$.name }} Selections</div>
    </div>
    .
    .
    .
  </ng-container>
</ion-content>

FIX (replace ngOnInit() with ionViewDidEnter()):

ionViewDidEnter() {
 this.subCategoryData$ = this._fireStoreService.getExampleData();
}

It would be great if this was fixed asap.