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

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

iphone 6 bad iphone x bad

Expected behavior:

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

iphone 6 good iphone x good

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

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 3
Comments: 15 (8 by maintainers)

Commits related to this issue

fix(cordova): size footer correctly Ref #13054 — committed to ionic-team/ionic-framework by mhartington 7 years ago

Most upvoted comments

@hugodes Should just be able to run

npm i @ionic/app-scripts@nightly ionic-angular@3.7.1-201710181432

mhartington on Oct 18, 2017

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 simulator screen shot - iphone x - 2017-10-17 at 09 49 01

No overlay

simulator screen shot - iphone x - 2017-10-17 at 09 48 51

mhartington on Oct 17, 2017

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

kensodemann on Oct 17, 2017

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

kensodemann on Oct 10, 2017

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

kensodemann on Oct 9, 2017

Can you install

npm i ionic-angular@3.7.1-201710091909

This should be fixed.

mhartington on Oct 9, 2017

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 ionic-angular@3.6.1

Attempted npm i ionic-angular@3.7.1-201710032000 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

kensodemann on Oct 5, 2017