iOS 11 status bar issue

Ionic Framework ionic-v3
1

Hi all, I met a issue of status bar after upgrading iOS, ionic-angular, WKWebview to lastest version.

see below, it looks like the status bar lost height so that the header stick to top:

image

‘viewport-fit=cover’ is tried but still not working.

And statusbar plugin is upgraded too: “cordova-plugin-statusbar”: “^2.2.3”,

Dose anyone have solution to fix this issue?:sob:

My development environment:

cli packages: (D:\My Projects\ionic-ui\node_modules)

@ionic/cli-utils  : 1.13.1
ionic (Ionic CLI) : 3.13.1

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 3.0.0
Cordova Platforms  : none
Ionic Framework    : ionic-angular 3.7.1

System:

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

Misc:

backend : legacy
1 Like
2

Hi there,

I’m facing the exact same issue on ios 11. This header issue appeared after I updated the ionic version to the latest (3.7.1). I’m using the ionic view apps and this issue occur in both of the Ionic View apps (on the legacy and the new one).

Please let us know if there is a solution for this problem!

Thanks & regards,
Arnold

3

Hi @szily20 and @seandeng,

I was able to make the padding correct on iOS 11 by following the steps from this blog: https://blog.ionic.io/ios-11-checklist/

Specifically, the step on WKWebView, where my version shows 1.15 when doing ionic cordova plugin list:

cordova-plugin-ionic-webview 1.1.15 "cordova-plugin-ionic-webview"

However in my case, I had too much padding after upgrading the plugin, and found that this snapshot of 3.7.1 worked: https://github.com/ionic-team/ionic/issues/13010#issuecomment-336696372

4

I have tried all these solutions but none of them work.

Even I tested at iOS simulator, everything is good. But on actual device the issue present again.