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?