Ionic-framework: Status bar issues after hiding and rotating

[RHinderiks]

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:
When navigating to a page and hiding the statusbar. Rotating the device from portrait to landscape and then leaving that page and turning the statusbar back on, the header has no padding for the status bar so the statusbar runs through the header

Expected behavior:
The header making room for the statusbar.

Steps to reproduce:
See current behaviour

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

cli packages: (/usr/local/Cellar/node@6/6.10.0_1/lib/node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.1.0 

local packages:

    @ionic/app-scripts : 3.1.0
    Cordova Platforms  : android 6.4.0 ios 4.5.4
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    ios-deploy        : 1.9.2 
    ios-sim           : 6.0.0 
    Node              : v6.10.0
    npm               : 5.6.0 
    OS                : macOS High Sierra
    Xcode             : Xcode 9.2 Build version 9C40b 

Environment Variables:

    ANDROID_HOME : /Users/robinhinderiks/Library/Android/sdk

Misc:

    backend : legacy

[kensodemann]

Hello! Thank you for opening an issue with us! Would you be able to provide a sample application via GitHub that demonstrates the issue you are having? Thanks for using Ionic!

[malwatte]

We faced this kind of issue. We did not use statusbar and cordova-plugin-ionic-webview plugins. So the fix was to add statusbar (use git URL to install the plugin) and cordova-plugin-ionic-webview
ionic cordova plugin add https://github.com/apache/cordova-plugin-statusbar
ionic cordova plugin add cordova-plugin-ionic-webview
Then all worked fine.
Looks like UIWebview does not support safe regions well.

[kensodemann]

@malwatte - you are correct about UIWebview. It also has other odd rendering issues on iOS 11. It really should not be used.

[RHinderiks]

@kensodemann So what is used by default when just starting an ionic project ?

[kensodemann]

@RHinderiks - WKWebview is used by default now. Basically, if you are using cordova-plugin-ionic-webview (which has been included by default for a few months now) then you should be good to go on that front.

[RHinderiks]

@kensodemann I added the webview plugin and this fixed some issues i had including this one. It introduced another but that already was a hacky solution on my part so

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