iPhone X Ionic 3 safe areas not working
I've using xCode 9.2, Ionic 3 with all the latest versions (updated everything I could think of) and I've added the following:
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
When testing on devices and in the simulator, with iPhone 7 all works fine, but with iPhone X I'm getting the following problem:
Both the top and bottom sections of the App are way too at the top/bottom respectively. I think this is something to do with the new safe-areas on iPhone X.
I've tried adding the following, but it didn't work as it gave me a white space at the top on all devices.
<preference name="StatusBarOverlaysWebView" value="false" />
Has anyone experienced a similar problem?
My Ionic Info:
cli packages:
@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.6
Cordova Platforms : ios 4.5.2
Ionic Framework : ionic-angular 3.7.1
System:
ios-deploy : 1.9.2
ios-sim : 5.0.12
Node : v7.10.0
npm : 4.2.0
OS : macOS High Sierra
Xcode : Xcode 9.2 Build version 9C40b
Environment Variables:
ANDROID_HOME : not set
Misc:
backend : legacy
I have Ionic Angular at 3.7.1 (few months old but still too old). If you update to 3.9.2 or newer (https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md#390-2017-11-08) then it works like a charm!