Ionic-framework: [ionic v4 - angular] - iPhone X don't show header and tabs correctly (missing safe area)

[SoulOnFire]

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)          : 4.0.1 (/Users/u007240/.npm-packages/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.0
   @angular-devkit/core       : 0.7.0-rc.3
   @angular-devkit/schematics : 0.7.0-rc.3
   @angular/cli               : 6.0.8
   @ionic/ng-toolkit          : 1.0.0
   @ionic/schematics-angular  : 1.0.1

System:

   NodeJS : v10.7.0 (/usr/local/Cellar/node/10.7.0/bin/node)
   npm    : 6.2.0
   OS     : macOS High Sierra

Describe the Bug
Every starter came without padding for the safe area in iPhone X for the Notch.

Steps to Reproduce
Steps to reproduce the behavior:

1. ionic start myApp [tabs|menu|blank] --type=angular
   

[mswilson4040]

Also seeing this as well....

[carstenbaumhoegger]

I'm also having the exact same problem!

[mswilson4040]

This may not be an ionic 4 issue, but an iPhoneX issue instead. I say this because after some looking around at who actually uses ionic, I ran accross this site: http://showcase.ionicframework.com/apps/top

I downloaded a couple of their apps, notably, MarketWatch and I can see this exact same issue there. Given Ionic 4 is in beta and was just released a couple days ago, my assumption is that Market Watch isn't using ionic 4 which would mean this issue is found in multiple Ionic versions.

[SoulOnFire]

@mswilson4040 this could be in fact something not related with ionic but in fact if we do any of the start templates in ionic 3 removing "--type=angular " ionic start myApp [tabs|menu|blank] all works as expected. Some of the apps in the market are incompatible with iPhone X because are created before ionic have iOS 11 support.

In order to resolve this issue I add the following css to the global.scss

body {
    background-color: var(--ion-color-primary);
}
ion-app {
    margin-top: env(safe-area-inset-top);
    margin-bottom: env(safe-area-inset-bottom)
}

[gabrielmaldi]

Related to #14742

[mswilson4040]

@SoulOnFire Can you expand on where the env function is imported from?

[gabrielmaldi]

This is now fixed in beta.3.

[babaru]

I'm afraid this issue still out there.

Ionic Info

Ionic:

   ionic (Ionic CLI)          : 4.1.2 (/usr/local/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.7
   @angular-devkit/core       : 0.7.5
   @angular-devkit/schematics : 0.7.5
   @angular/cli               : 6.1.5
   @ionic/ng-toolkit          : 1.0.8
   @ionic/schematics-angular  : 1.0.6

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.1.4, (and 4 other plugins)

System:

   ios-deploy : 1.9.2
   NodeJS     : v10.10.0 (/usr/local/Cellar/node/10.10.0/bin/node)
   npm        : 6.4.1
   OS         : macOS High Sierra
   Xcode      : Xcode 10.0 Build version 10A255

Describe the Bug
Every starter came without padding for the safe area in iPhone X for the Notch. It works fine on browsers and simulators, however doesn't work on real device.

Steps to Reproduce
Steps to reproduce the behavior:

ionic start myApp tabs --type=angular

ionic cordova build ios --prod 

// then deploy to a real iPhone X device

Would you please check this again? Thank you very much in advance!

[babaru]

Please let me clarify this a bit:

The bottom Tab bar works just fine while the header height seems still not corrent. Please find a screenshot as follow:

Thanks!

[mhartington]

@babaru Please make sure you're updating the starter to use beta.12 of @ionic/angular. By default they're using beta-7 right now (we need to update the base project).

With beta 12, things look as expected