Ionic 4: problem on old iOS browser

Ionic Framework
1

Hi,
on a Starter template: sidemenu, I encounter problems with the “ion-menu” on old iOS 10.0.2 - Chrome v.71.0.3578.89. The sidemenu not rendered content (see attachment).

Starter-template-sidemenu
Starter-template-sidemenu.png375×648 13.7 KB

Ionic:
ionic (Ionic CLI) : 4.10.3
Ionic Framework : @ionic/angular 4.0.2
@angular-devkit/build-angular : 0.12.4
@angular-devkit/schematics : 7.2.4
@angular/cli : 7.2.4
@ionic/angular-toolkit : 1.4.0

System:
NodeJS : v8.12.0
npm : 6.4.1
OS : Windows 10

Thanks for any suggestion!

1 Like
2

Did you remote debug the problem on the device already? Follow these instructions here to debug the problem in Safari dev tools: https://ionic.zone/debug/remote-debug-your-app#ios Look at the console and network tabs for errors.

(As this is Chrome, not Safari, probably combine the instructions of Android and iOS)

3

No error on console, but I verified that if I set the “type” property of the “ion-menu” element to “overlay” and if I set the element “ion-content” with "style = 'height: 2000px '“the” sidemenu "is displayed correctly. Instead the overlay on the page is not displayed and therefore it is not possible to close the menu by clicking on the overlay.
Testing on an updated iPhone the page is displayed correctly without making changes to the starting template. The problem is that with the 10.0.2 version of ios it is not possible to update Chrome over the v.71.0.3578.89.

See code:

<ion-app>
  <ion-split-pane>
    <ion-menu type="overlay">
      <ion-header>
        <ion-toolbar>
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content style="height: 2000px">
        <ion-list >
          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages" >
            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
              <ion-icon slot="start" [name]="p.icon"></ion-icon>
              <ion-label>
                {{p.title}}
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>
</ion-app>
4

Another problem if I try to set the “side” property of the “ion-menu” element to “end”. It is not minimally considered and the menu is still displayed on the left. (Always on iOS 10.0.2)

5

Have you found any solution yet ? I have been facing the same issue