3

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:

enter image description here

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
Dimitri
  • 2,240
  • 3
  • 21
  • 39
  • take a look at this thread https://github.com/apache/cordova-plugin-statusbar/pull/87 – Reza Dec 22 '17 at 14:45
  • I have see it, it doesn't help. I think it's something to do with CSS specifically. I found this post https://stackoverflow.com/questions/46232812/cordova-app-not-displaying-correctly-on-iphone-x-simulator, they suggest to add to body "padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top);" but it's doesn't help... Maybe I'm doing the CSS wrong. I've added this to App.scss – Dimitri Dec 22 '17 at 14:57
  • https://github.com/ionic-team/ionic/issues/13294 – Reza Dec 22 '17 at 15:19
  • try with this https://stackoverflow.com/questions/46322419/ionic-tab-bar-overlaps-home-button-iphone-x-ios-11 – Ernesto Schiavo Dec 22 '17 at 15:36
  • I've read all of these and still none of them have help to solve the problem. – Dimitri Dec 22 '17 at 16:37
  • Did you get answer for this question ? – Sneha May 15 '18 at 05:15

2 Answers2

2

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!

Dimitri
  • 2,240
  • 3
  • 21
  • 39
0

Try this:

<meta name="viewport" viewport-fit=cover content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
Jay Ordway
  • 1,708
  • 2
  • 11
  • 33