isaax2 commented 4 years ago

Bug Report

Ionic version:

5.1.1

Current behavior:

When you add a new ion-menu doesn't use safe area(--ion-safe-area-top) on iPhone X in fullscreen mode, you need to add some padding-top manually to display it correctly.

Expected behavior:

It should be set the correct --ion-safe-area-top in ion-menu elements like other elements such as ion-header/ion-toolbar, whose work fine.

Steps to reproduce:

1.- Create a new sidemenu App. 2.-Change the Apple Metatag apple-mobile-web-app-status-bar-style to fullscreenmode "black-translucent" on index.html.

3.- Comment the line in app.component.scss whose is adding the top padding on ion-menu.ios ion-list { // padding: 20px 0 0 0; }, 4.- Serve the app and Add to Home Screen from Safari on IPhone X. 5.- Open the menu, and it shows overlaped with the status bar.

Related code:

ionic start myApp sidemenu --type=angular
#Change to <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
// Comment the line on app.component.scss -> padding: 20px 0 0 0; 
ionic serve --external

Other information:

Ionic info:

   Ionic CLI                     : 6.9.2 (/Users/isaax/.nvm/versions/node/v12.16.1/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.1.1
   @angular-devkit/build-angular : 0.901.7
   @angular-devkit/schematics    : 9.1.4
   @angular/cli                  : 9.1.7
   @ionic/angular-toolkit        : 2.2.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.16.1 (/Users/isaax/.nvm/versions/node/v12.16.1/bin/node)
   npm    : 6.13.4
   OS     : macOS Catalina

mhartington commented 4 years ago

Hey there! I just tried this locally and wasn't able to replicate...

Could you throw this into a full demo app to just make sure I'm not missing anything?

isaax2 commented 4 years ago

Hi @mhartington Here's the demo app running on firebase. https://sidemenu-573a2.web.app/ Here's the code on github https://github.com/isaax2/sidemenu

kotuadam commented 4 years ago

I confirm this bug. I am experiencing the same issue

chrisweight commented 3 years ago

Yep, I have the same issue

salbahra commented 3 years ago

I am still having to manually add the the margin for both the ion-menu and ion-modal.

Update: The issue was a missing <ion-header>. Thanks!

mhartington commented 3 years ago

Closing in favor of https://github.com/ionic-team/ionic-framework/issues/19482

ionic-team / starters

bug: <ion-menu> doesn't use safe area(--ion-safe-area-top) on iPhone X in fullscreen mode. #1308

Bug Report