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.

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.

@liamdebeasi I just updated the app to ionic 4.7.1 and angular 8.1.2 and the problem is the same. The problem is the same as what I posted in my first, original post. The transition is breaking up and flickering. I have 3 apps and the same things happen on all of them.

Here is my package.json

"dependencies": {
    "@angular/common": "^8.1.2",
    "@angular/core": "^8.1.2",
    "@angular/forms": "^8.1.2",
    "@angular/platform-browser": "^8.1.2",
    "@angular/platform-browser-dynamic": "^8.1.2",
    "@angular/router": "^8.1.2",
    "@auth0/angular-jwt": "^3.0.0",
    "@ionic-native/contacts": "^5.11.0",
    "@ionic-native/core": "^5.11.0",
    "@ionic-native/device": "^5.11.0",
    "@ionic-native/screen-orientation": "^5.11.0",
    "@ionic-native/sms": "^5.11.0",
    "@ionic-native/splash-screen": "^5.11.0",
    "@ionic-native/status-bar": "^5.11.0",
    "@ionic/angular": "^4.7.1",
    "@ionic/storage": "^2.2.0",
    "@mobiscroll/angular": "file:./src/lib/mobiscroll-package/mobiscroll-angular-4.7.2.tgz",
    "cordova-android": "8.0.0",
    "cordova-android-support-gradle-release": "^3.0.1",
    "cordova-ios": "^4.5.5",
    "cordova-plugin-contacts": "^3.0.1",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^4.1.0",
    "cordova-plugin-screen-orientation": "^3.0.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-sms-plugin": "^1.0.0",
    "cordova-sqlite-storage": "^3.2.0",
    "core-js": "^2.5.4",
    "es6-promise-plugin": "^4.2.2",
    "libphonenumber-js": "^1.7.21",
    "moment": "^2.24.0",
    "ngx-moment": "^3.4.0",
    "ngx-socket-io": "^2.1.1",
    "rxjs": "~6.5.1",
    "rxjs-compat": "^6.5.2",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/architect": "^0.802.0",
    "@angular-devkit/build-angular": "^0.802.0",
    "@angular-devkit/core": "^8.2.0",
    "@angular-devkit/schematics": "^8.2.0",
    "@angular/cli": "~8.2.0",
    "@angular/compiler": "~8.2.0",
    "@angular/compiler-cli": "~8.2.0",
    "@angular/language-service": "~8.2.0",
    "@ionic/angular-toolkit": "~2.0.0",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~8.2.0",
    "tslint": "~5.17.0",
    "typescript": "~3.5.3"
  },

@liamdebeasi thank you for all the background information. i’m also sure that Ionic does a great job at optimising everything for good performance. i was just suggesting the possibility that this is not related to performance or (missing) optimisation but that this is (simply) a bug. of course i might be wrong here. however since i feel i can’t simply settle on this being the status quo now, i took the effort to create two blank Ionic projects, one with Ionic 4 and one with version 3. I added a second page “Page2” and a button on the home page that navigates there. “Page2” has this in the controller:

  ngOnInit() {
    setTimeout(() => {
      this.showDiv = true;
    },50)
  }

and this in the template:

<ion-content>
  <div *ngIf="showDiv">Delayed content</div>
</ion-content>

The Ionic 4 version clearly shows the issue (tested on Safari Reponsive Design mode on a fast dev machine, as well as iOS Sim), the Ionic 3 version works just fine.

Is there any updates on this? I’m still seeing this problem even in 4.8.0

Hi, some new with this problem, I have a critical application that will go to production and I have this problem.

Thanks for the follow up. I was able to reproduce this issue. We will look into a fix!

Hi Liam, Thx for getting back on this. You say that this is not an Ionic issue but Ionic is the one responsible for changing their Ionic 4 platform to a PWA-based approach heavily reliant upon Shadow Dom / Webkit, etc. We don’t have any of these issues with Ionic 3 builds. So I hope you can appreciate my frustration when you say “this is not an issue with Ionic.” Over the last year, Ionic has largely ceased ongoing support for Ionic 2/3, which was working well for our mobile apps and Ionic is now concentrating on a PWA approach with Ionic 4. So we were pretty much forced to move to the use of Ionic 4, only to discover that Ionic 4 brings with it serious performance issues like this. It doesn’t matter to us that it’s a webkit issue, what matters to us is that Ionic has put us in this position by relying on external factors that are apparently beyond your control. After 9 months of waiting for a fix, we are getting pretty discouraged.

This issue seems like something that is better handled at the application level than at the framework level.

Using ionViewDidEnter instead of ngOnInit works because ionViewDidEnter is run after the animation has been completed, whereas ngOnInit is fired when the page component is created (before the animation has started).

Doing constant rerenders via an *ngIf or a pipe is going to cause the browser to do a lot of work. This is often referred to as “layout thrashing” . While the navigation animations are handled off the main thread, your JavaScript code and animations do share certain resources. These rerenders are causing the browser to constantly use these resources, leaving fewer resources/computation time for the animation itself.

Another point to mention is toggling the *ngIf state is going to continually add/remove elements from the DOM, which is a very expensive operation in general. It’s important to remember that your code is oftentimes going to cause Angular to run more code, which is going to cause the browser to have to do even more work (some people have already mentioned this, I just wanted to reiterate it).

From the examples that you all have provided, there is quite a lot of work being done while the animation is still transitioning. I would recommend that this work gets done after the animation is done by using ionViewDidEnter. If you absolutely need the view to be “ready” when the animation starts you will likely need to preload/cache your data, throttle how often your pipes/data causes the view to rerender, or ensure that your elements are not constantly being removed from or added to the DOM.

As I said previously, I think this is an issue that would be better handled at the application level via code optimizations than at the framework level. Any thoughts or questions? Thanks!

@liamdebeasi from my tests it looks like the problem only happens if the ngIf expression changes during the transition animation. So probably removing/adding nodes from the DOM somehow messes with the animation.

I did more testing and it seems that 4.6.2 version does not resolve the problem with page transition.

Here is the code that I put in the footer and on transition, it is not performing as epxected

<ion-footer>
  <ion-toolbar class="no-border" color="white">
    <ion-textarea
      #textarea
      autoGrow
      rows = "1"
      autocorrect="on"
      autocomplete="on"
      autocapitalize="on"
      placeholder="Send message...">
    </ion-textarea>

    <ion-buttons slot="end">
      <ion-button [disabled]="broadcasting" color="dark" (click)="broadcastMessage(textarea.el.textContent)">
        <ion-icon name="send" slot="icon-only"></ion-icon>
      </ion-button>
    </ion-buttons>

  </ion-toolbar>
</ion-footer>

Hi everyone,

This is still on our radar, but we have been focused on shipping Ionic w/ the Stencil One update. Now that the Stencil One update has been released, I updated the example app (https://github.com/ionic-team/ionic/issues/17649#issuecomment-493106320) to Ionic 4.6.1. (Tested on iPhone 7)

Compared to previous versions of Ionic, I am noticing an improvement in performance with the iOS transition. I do notice a little bit of jank, but it’s not as noticeable as before.

Can other people update their apps to 4.6.1 and confirm whether or not updating reduces the severity of this issue? I am still interested in resolving any remaining jank, but am curious if the update helps at all.

Thanks!

@liamdebeasi Did you have any luck with tracking this one down? I’m still seeing this issue in v4.4.0. It really impacts the UX when all of the page transitions are like this. I find that it frequently happens when using Angulars ngOnInit method to load in data.

Any update on this issue ? I have the same problem …

If there is anything that calls controller like {{ myVariable }} the transition will breakdown. However I have plenty of pages where I will be making the same calls and transition would work fine. I load the pages the same way.

I am trying to debug this, but no luck

Ok thanks! I’ll check this issue out some more.

@liamdebeasi I didn’t realize I needed to respond… yes, I still experience the same issue. I am currently on 4.2.0

I just wanted to confirm that it started to happen again… not sure why it was working good for 1 day. I will try to create repository that reproduces the problem.

It seems like upgrade to Ionic 4.1.0 solved the issue.

If it means anything I tested on iPhone 8 Plus iOS 12.1.4