Ionic-framework: Setting statusBar.overlaysWebView(false) breaks the ion-footer on all iPhone models on 3.7

[hugodes]

Resources:

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

Current behavior:

The button in the footer is misplaced on iPhone < X and hidden on iPhone X

Expected behavior:

The button should have a normal padding on iPhone < X and be visible on iPhone X

Steps to reproduce:

Run this app https://github.com/hugodes/ionic-statusBar-breaking in an iPhone(X and inferior) emulator and look at the button in the footer

Related code:

In this sample project created with ionic start, the only line I added is this one in the constructor of the main component.

      statusBar.overlaysWebView(false);

Other information:

In line with http://blog.ionic.io/ios-11-checklist/ , I used

ionic cordova plugin rm cordova-plugin-statusbar
ionic cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git

hoping that it would resolve my issue but it didn't.

This issue is also only apparent when using WKWebView

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

$ ionic info

cli packages: (/Users/hugodes/.nvm/versions/node/v8.6.0/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 : 3.0.0
    Cordova Platforms  : ios 4.5.1
    Ionic Framework    : ionic-angular 3.7.1

System:

    ios-deploy : 1.9.2 
    Node       : v8.6.0
    npm        : 5.3.0 
    OS         : macOS High Sierra
    Xcode      : Xcode 9.0 Build version 9A235 

Misc:

    backend : legacy

[kensodemann]

Hello! Thank you for opening an issue with us!

Duplicated on iPhone X, iPhone 8, & iPhone 6 iOS 11
Issue not present on iPhone 6 iOS 10.3.1
Issue also not present if downgrading to [email protected]

Attempted npm i [email protected] which is nightly with upcoming iOS 11 fixes in it, but that also had the issue.

We will look into this.

Thank you for using Ionic

[mhartington]

Hmm, I'm not able to replicate this at the moment

The first one has the statusbar set to not overlay, and the second is set to true.

This is the conference app with

1. Latest WKWebview installed
2. Nightly statusbar plugin installed.

[mhartington]

Can you install

npm i [email protected]

This should be fixed.

[kensodemann]

@mhartington - I tried the nightly against @hugodes's repo and it worked for me.

[hugodes]

@kensodemann how to I go about installing the nightly status bar plugin ?

[kensodemann]

@hugodes - info from here: http://blog.ionic.io/ios-11-checklist/ (there might be other handy info in there as well, so I included the link).

ionic cordova plugin rm cordova-plugin-statusbar
ionic cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git

Note that this is only required until they do a release.

[hugodes]

@kensodemann thanks a bunch, you and the ionic team have been awesome at adressing this issue 👍

[hugodes]

@kensodemann @mhartington

Sorry guys but the issue has to be re-opened, while the fix does work for iPhone X, the footer is still broken for iPhone 6 & 8.

Iphone 8 @3.6 (footer OK)

Iphone 8 @3.7.1-201710091909 (footer KO)

I've updated https://github.com/hugodes/ionic-statusBar-breaking with nightly status-bar and ionic-angular.

[kensodemann]

@hugodes - I have not had time to review this issue yet. Hope to get to it sometime this week.

[mhartington]

Hmm, ok I see why this is happening.

Toolbar is getting min-height, and also setting an explicit height. Removing the explicit height fixes this.

Overlay

No overlay

[gigocabrera]

https://github.com/ionic-team/cordova-plugin-ionic-webview/issues/24

[hugodes]

@mhartington could you please give the reference to the nightly build including this commit so I can build against it ?

Cheers

[mhartington]

@hugodes Should just be able to run

npm i @ionic/app-scripts@nightly [email protected]

[hugodes]

works like a charm !

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