iPhone X 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?