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?
<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