[Ionic 5, iPhone 6s] ion-router-outlet not working

Ionic Framework
1

It came to my attention recently that our production application doesn’t route correctly on an iPhone 6s. The user who had the problem was running the latest iOS (13.5.1) but I managed to obtain an iPhone 6s running an older version (11.4.1) that shows the same symptoms.

The app is using Ionic 5 and Angular 9. It’s not very fancy. We have a side menu and the main content.

The symptoms are the user is on our main home page (app-home) and taps a link which routes them to another page (app-device). This is pretty standard Angular router.navigate(). When tapping the link, the new page animates in and display. However, on the iPhone 6s, nothing is shown.

So I connected the Safari debugger to my app on iPhone 11 and iPhone 6s. Here are the results:

The iPhone 11 (and every other device) shows the pages under the ion-router-outlet. When navigating to app-device, it adds it under ion-router-outlet. Tapping back will remove it.

ionic-11
ionic-111958×591 337 KB

Now when I repeat the steps on the iPhone 6s, something interesting happens.

ionic-6s
ionic-6s1949×559 322 KB

You’ll see the page app-device is being added outside of the ion-router-outlet. Because of this, it is not displaying to the user.

Has anyone else seen this? What is causing this and what is the fix?

app.component.html

<ion-app>
  <ion-split-pane contentId="main">
    <ion-menu contentId="main">
      <ion-header>
        <ion-toolbar>
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-menu-toggle auto-hide="false" *ngFor="let p of navigation">
            <ion-item>etc</ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet id="main"></ion-router-outlet>
  </ion-split-pane>
</ion-app>

   Ionic CLI                     : 6.10.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.2.3
   @angular-devkit/build-angular : 0.900.7
   @angular-devkit/schematics    : 9.0.7
   @angular/cli                  : 9.0.7
   @ionic/angular-toolkit        : 2.2.0
2

Apparently this is also happening on iPhone 7 and 8 devices as well.

Has no one seen where the router does this odd behavior?

3

To anyone seeing behavior like this, I figured it out. It was a runtime error in ngOnInit() of the page being loaded. The page had some device specific code in there, and the error was not shown in the console for some reason.

1 Like