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

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.

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

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

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

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

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.