bug ionic 2 and 3 the header in iPhone not take the correct height

[javico2609]

Ionic version: (check one with "x")
[ ] 1.x
[ ] 2.x
[ X] 3.x

I'm submitting a ... (check one with "x")
[x ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
i tested this behavior on a real iphone, am i see the same problem like see on my local ionic lab

Expected behavior:
the header take the correct height

Steps to reproduce:

REPO
https://github.com/javico2609/angular-mvd-meetup

-->

Related code:

@Component({
    selector: 'icbanking-header-navbar, [icbanking-header-navbar]',
    template: `
        <ion-navbar>
            <button ion-button menuToggle>
                <ion-icon name="menu"></ion-icon>
            </button>
            <div class="logo"></div>
            <ion-title class="ion-title-with-logo">{{_menuTitle}}</ion-title>
        </ion-navbar>   
    `
})
export class ICBankingHeaderNavbarComponent implements OnInit {

@Input()
    get title(): string {
        return this._menuTitle;
    }
    set title(val: string) {
        this._menuTitle = val;
  }

  // some logic here
}

////// Home Component

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, public navParams: NavParams) { }

  ionViewDidLoad() {
    console.log('ionViewDidLoad HomePage');
  }
}

/// Home html
<ion-header>
  <icbanking-header-navbar title="{{ 'HomePage' | translate }}"></icbanking-header-navbar>
</ion-header>

Other information:

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

global packages:

    @ionic/cli-utils : 1.1.0
    Cordova CLI      : 7.0.0
    Ionic CLI        : 3.1.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.1.0
    @ionic/cli-plugin-ionic-angular : 1.1.0
    Ionic Framework                 : ionic-angular 3.2.1

System:

    Node       : v7.7.3
    OS         : Windows 10
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed

[jgw96]

Hello, thanks for using Ionic. Unfortunately, I cannot reproduce this issue locally. Could you post a repo we could use to reproduce this issue?

[javico2609]

Hi, on session "Steps to reproduce:" can find the repo link

https://github.com/javico2609/angular-mvd-meetup

[moberwasserlechner]

Hi,

I came across sth similar, when running a IONIC PWA on ios10.

@javico2609 You might be able to fix it adding the following to your index.html.

<meta name="apple-mobile-web-app-status-bar-style" content="black">

Setting the content attribute 'black-translucent' has the same effect seen in your examples.

See the docs for more information and related [meta tags].(https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html)

Hope this helps

[marcovtwout]

@javico2609 Did you end up finding a correct fix for this issue?

[kensodemann]

Hello all! As it seems it has been a while since there was any activity on this issue I am closing it for now. There were a lot of changes made with regard to this for iOS 11, so hopefully those changes addressed this as well. Feel free to comment if you are still running into this issue.

Thanks for using Ionic!

[marcovtwout]

This was probably fixed with #13294

[ionitron-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.