bug: Content in menu does not respect safe area

[mhartington]

Bug Report

Ionic version:

[x] 4.x

Current behavior:

When placing an ion-content as a direct child of ion-menu on iOS, the content area is pushed up into the statusbar area.

Expected behavior:

The content should be pushed down by the safe-area amount.

Steps to reproduce:

Related code:

<ion-app>
 <div class="ion-page" id="main"></div>
 <ion-menu contentId="main">

 <ion-content>
 <ion-list>
 <ion-item>Item 01</ion-item>
 <ion-item>Item 02</ion-item>
 <ion-item>Item 03</ion-item>
 </ion-list>
 </ion-content>
 </ion-menu>
</ion-app>

[hkjeffchan]

same as ionic3 on IOS13

[aparajita]

Hey @mhartington, I fixed this issue with this CSS:

/*
 Push the top of the menu below the safe area
 so it doesn't overlay the status bar
*/
ion-menu {
 margin-top: env(safe-area-inset-top);
}

/*
 Pull the menu header up to account for the menu top margin
*/
ion-menu ion-header:first-child,
ion-menu ion-content:first-child {
 margin-top: calc(env(safe-area-inset-top) * -1);
}

[basvdijk]

Hey @mhartington, I fixed this issue with this CSS:

/*
 Push the top of the menu below the safe area
 so it doesn't overlay the status bar
*/
ion-menu {
 margin-top: env(safe-area-inset-top);
}

/*
 Pull the menu header up to account for the menu top margin
*/
ion-menu ion-header:first-child,
ion-menu ion-content:first-child {
 margin-top: calc(env(safe-area-inset-top) * -1);
}

@aparajita Thanks for providing a solution. I needed to do some tweaking to make it work for my app:

ion-menu {
 margin-top: env(safe-area-inset-top);
}

ion-menu ion-content {
 margin-top: calc(env(safe-area-inset-top) * -1) !important;
}

[paolosanchi]

it seems that the safe area is set only for toolbar in header and footer:

ionic-framework/core/src/components/header/header.scss

Lines 17 to 19 in f81d18c

	ion-header ion-toolbar:first-of-type {
	padding-top: var(--ion-safe-area-top, 0);
	}

ionic-framework/core/src/components/footer/footer.scss

Lines 17 to 19 in f81d18c

	ion-footer ion-toolbar:last-of-type {
	padding-bottom: var(--ion-safe-area-bottom, 0);
	}

So the supposed way to do it is this one:

<ion-app>
 <ion-menu contentId="main">
 <ion-header>
 <ion-toolbar>
 {stuff}
 </ion-toolbar>
 </ion-header>
 <ion-content>
 {stuff}
 </ion-content>
 <ion-footer>
 <ion-toolbar>
 {stuff}
 </ion-toolbar>
 </ion-footer>
 </ion-menu>
</ion-app>

I know you are aware, I type this down if anyone struggle on this like I did.

Behind this, I think the guys at ionic seems to use dedicated variables instead of directly safe-area-inset-top, probably for testing propose.

ionic-framework/core/src/css/core.scss

Lines 149 to 156 in f81d18c

	@supports (padding-top: env(safe-area-inset-top)) {
	html {
	--ion-safe-area-top: env(safe-area-inset-top);
	--ion-safe-area-bottom: env(safe-area-inset-bottom);
	--ion-safe-area-left: env(safe-area-inset-left);
	--ion-safe-area-right: env(safe-area-inset-right);
	}
	}

Actually, you can redefine them in index.html like this:

ionic-framework/core/src/components/modal/test/basic/index.html

Lines 13 to 20 in a9b2260

	<style>
	:root {
	--ion-safe-area-top: 20px;
	--ion-safe-area-bottom: 20px;
	--ion-safe-area-right: 20px;
	--ion-safe-area-left: 20px;
	}
	</style>

[SaroGFX]

I have spend countless hours now on trying to get this right. But the toolbar keeps getting screwing up in the menu. I tried a rebuild like above is done, but I still get bugged results.

<IonMenu 
 contentId="main" 
 swipeGesture={true} 
 disabled={isDisabled()}
 className={MenuCSS.Menu}
 >
 
 <IonHeader>
 <IonToolbar><IonTitle>Title</IonTitle></IonToolbar>
 </IonHeader>

 <nav>
 <IonText>Administration</IonText>
 <ul>
 <li>item</li>
 <li>item</li>
 <li>item</li>
 <li>item</li>
 <li>item</li>
 <li>item</li>
 <li>item</li>
 <li>last item</li>
 </ul>
 `</nav>`

 <footer>
 <IonText>Footer</IonText>
 </footer>
 </IonMenu>

ion-menu.Menu {
 --background: var(--wf-dark-gray);
 
 &::part(container) {
 justify-content: start;
 }

 nav {
 overflow-y: auto;
 }

 footer {
 margin-top: auto;
 background-color: rgba(var(--ion-color-white-rgb), 0.2);
 padding: 1em;
 }

}

The result on iPhone 13

[eugr]

Looks like this bug has been open for 5 years already! Are there any plans to fix?