Ionic-framework: Ionic 3 header height on IOS 10 or 11

[mqasem92]

Resources:
Before submitting an issue, please consult our troubleshooting guide (http://ionicframework.com/docs/troubleshooting/) and developer resources (http://ionicframework.com/docs/developer-resources/)

Please make sure you are posting an issue pertaining to the Ionic Framework. If you are having an issue with the Ionic Pro services (Ionic View, Ionic Deploy, etc.) please consult the Ionic Pro support portal (http://support.ionicjs.com)

Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[ x] 3.x
[ ] 4.x

I'm submitting a ... (check one with "x")
[x ] bug report
[ ] feature request

Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

Header height changed and come more bigger on IOS 11, but on browser or ionic view is okay.
Please check the following image.

On browser or ionic view image
VS
On Real Device or simulator image

Expected behavior:

the default header height not changed

Steps to reproduce:

Related code:

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon class="icon-menu" name="menu"></ion-icon>
    </button>
    <ion-title>{{ 'home.HomePageTitle' | translate }}</ion-title>
  </ion-navbar>
</ion-header>

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages: (#\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.10.2
    ionic (Ionic CLI) : 3.10.3

global packages:

    Cordova CLI : 7.0.1

local packages:

    @ionic/app-scripts : 1.3.0
    Cordova Platforms  : android 6.2.3 ios 4.4.0
    Ionic Framework    : ionic-angular 3.0.1

System:

    Node : v6.10.3
    npm  : 3.10.10
    OS   : Windows 10

[kensodemann]

Hello! Thank you for opening an issue with us!

Your Ionic Framework version (3.0.1) is fairly old. The current version is 3.6.1 with 3.7.0 hopefully being released soon. Please let me know if this is still an issue with the newer versions.

Also, for iOS 11, be sure to apply the changes mentioned here: https://blog.ionic.io/ios-11-checklist/

Thank you for using Ionic

[mqasem92]

@kensodemann I updated the ionic framework to the last version now.
Now after update I got this issue and I can't test my app, When I run my app in the real device I got white screen after splash screen and never go to the home page.

have any idea why ?

@ionic/cli-utils : 1.12.0
ionic (Ionic CLI) : 3.12.0

global packages:

cordova (Cordova CLI) : 7.0.1

local packages:

@ionic/app-scripts : 2.1.4
Cordova Platforms  : android 6.2.3 ios 4.4.0
Ionic Framework    : ionic-angular 3.6.1

System:

Node : v6.10.3
npm  : 3.10.10
OS   : Windows 10

Misc:

backend : legacy

[mqasem92]

@kensodemann I solved the white screen issue, because I add viewport in the meta tag in the index.html file.

<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

Anyway, what happen is! If I put the viewport in the meta tag the app header gonna fixed and perfect in the simulator but when I try it on the real device it'll show white screen.

If I remove this viewport from the meta tag, it'll work in the real device normaly but the header issue will still exist like before.

[kensodemann]

Adding viewport-fit=cover should not be an issue. I added that to my viewport meta object in several apps and they run fine on sims and on my iPhone. It must be something else.

Can you duplicate this using a sample project and then share that sample via GitHub?

[mqasem92]

I created the sample project using ionic-start command and still issue the same.

• I run it on the real device ( given me white screen with loading long time ).
• I tried remove view-fit=cover from the meta tag it's work fine on the real device but the header issue still exist.

Check the project on the GitHub Ionic-Test

My device information : iPhone 6s with IOS11
Use Xcode 9

ohameds-iMac:MyTest mohamedqasem$ ionic info

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.12.0
ionic (Ionic CLI) : 3.12.0

global packages:

cordova (Cordova CLI) : 7.0.1

local packages:

@ionic/app-scripts : 2.1.4
Cordova Platforms  : ios 4.4.0
Ionic Framework    : ionic-angular 3.6.1

System:

ios-deploy : 1.9.2
Node       : v6.11.3
npm        : 5.4.2
OS         : macOS Sierra
Xcode      : Xcode 9.0 Build version 9A235

Misc:

backend : pro

[mqasem92]

I tried use --prod in the sample and work fine but with header issue

Anyway on my application still
with view-fit=cover --> White screen
without view-fit=cover --> Normal with header issue

[kensodemann]

I have tried your sample and it works just fine on a sim and on my device. I am also using XCode 9 for the build. My device is an iPhone 7 with iOS 11.0.1 installed.

How are you building for iOS? Your ionic info states you are using Windows 10? Perhaps there is something odd with your build system?

[mqasem92]

I'm using MAC VM.
My project was built in Windows 10, then I transfer the project to the MAC VM to build it for iOS.

The test sample was built in the MAC vm and work fine but still the header issue exist.

@kensodemann is the header on the test sample is okay from your side?

[uniphonic]

This sounds to me like the same same issue I'm seeing as well, and also sounds like the same thing as issue #13010 .

When the viewport-fit=cover is added, I get the extra padding around my content areas, but without it, I get white bars above and below my app on iOS.

[kensodemann]

Actually, you two sound like you are saying the opposite of each other.

@mqasem92 says:
with viewport-fit=cover --> White screen
without viewport-fit=cover --> Normal with header issue

@uniphonic says:
When the viewport-fit=cover is added, I get the extra padding around my content areas
without it, I get white bars above and below my app on iOS

Also, @mqasem92 says "white screen" which I assume to mean a totally blank screen

Also, @mqasem92 is seeing different results on a sim than on a regular device. Are you as well @uniphonic?

[kensodemann]

@mqasem92 your sample app is working fine on my device (iPhone 7 iOS 11) when viewport-fit=cover.

When you say you get a "white screen" with viewport-fit=cover on your device, does that mean a total white screen?

Without viewport-fit=cover, I get the same issue as you, but that is expected. You _should_ be using viewport-fit=cover, so let's not worry about that case.

Looking at your app sample app, it does not appear that you have followed the instructions that are here: https://blog.ionic.io/ios-11-checklist/ (which have changed a bit since this morning's release of 3.7.0), but that is mostly a big deal when running on an iPhone X.

When I apply the stuff from the blog, including 3.7.0, then I get the issue outlined in #13010.

[mqasem92]

@kensodemann Omg !!!!
can't believe !!
Finally it's working now and the header design issue solved too !!

Anyway, All what I did the follow all steps here https://blog.ionic.io/ios-11-checklist/
and I missing make ionic-angular updated after update ionic framework .. using the following command.

npm install -g ionic@latest
npm install [email protected] --save
npm install @ionic/[email protected] --save-dev
npm install @angular/[email protected] --save
npm install @angular/[email protected] --save
npm install @angular/[email protected] --save
npm install @angular/[email protected] --save
npm install @angular/[email protected] --save
npm install @angular/[email protected] --save
npm install @angular/[email protected] --save
npm install @angular/[email protected] --save
npm install [email protected] --save
npm install zone.[email protected] --save

Also, I added WKWebView using instruction here readme

And then it show me error when I trying to build about the app-script, I type the following command.

npm install @ionic/app-scripts@latest

Thanks man.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.