Iphone X css issue in ionic3.8.0

I am using ionic 3.8.0, and I find that when alert is present in iphoneX, the top and the backdrop have a gap like the image below, everyone know how to fix it? thanks a lot
34 PM

Info:

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.15.2
ionic (Ionic CLI) : 3.15.2

global packages:

cordova (Cordova CLI) : 7.1.0 

local packages:

@ionic/app-scripts : 3.0.1
Cordova Platforms  : android 6.3.0 ios 4.5.3
Ionic Framework    : ionic-angular 3.8.0

System:

ios-deploy : 1.9.2 
ios-sim    : 5.0.13 
Node       : v7.10.0
npm        : 5.5.1 
OS         : macOS Sierra
Xcode      : Xcode 9.0.1 Build version 9A1004 

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : legacy

https://blog.ionic.io/ios-11-checklist/

HI, thanks for your reply. I have already done all in the checklist. What means?

Good then, checklist checked :wink:

Then…do you face the problem in your app right? Or could you reproduce it with a minimal app/project?

Thanks again. The weird thing is that I have open a new minimal project have no this problem. But I am sure that I haven’t add any css to cause this. Any idea? =)

Not sure I understand correctly…do you face that problem too with a minimal project or you are not facing that problem with a minimal project? Or is your app a minimal project? I’m kind of confuse

Hah, sorry for the confusion. I open a new blank new project have no problem. But in my existing project have this problem. i.e. two projects version info are the same.

Then I would reinstall cleanly the libs and plugins first and check if you still face the problem

ionic cordova plugin rm cordova-plugin-statusbar --save
ionic cordova plugin add cordova-plugin-statusbar --save
rm -r node_modules/
npm install

would you like to try?

1 Like

Hi, reedrichards. I discover that when I add the cordova statusbar plugin to the blank new project, it will reproduce the problem. So I guess is the plugin problem and when I rm the plugin in my existing project, the problem solved.

Cool to hear you found a solution…but just to be sure, you did a rm of the plugin and add afterwards right? Respectively by doing so you have installed the last version of cordova-plugin-statusbar

The first change is to make sure you update your viewport meta tag in your index.html to add the viewport-fit=cover field. This ensures the webview takes up the full size of the screen. The new default is to stick the webview in the new safe regions which is not what you want for Ionic/Cordova apps:

<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">

1 Like

Try these steps…

1. Update meta tag in index.html

2. Install latest statusbar plugin

ionic cordova plugin rm cordova-plugin-statusbar --save
ionic cordova plugin add cordova-plugin-statusbar --save

3. Install latest ionic native statusbar

npm install --save @ionic-native/status-bar

4.Don’t forget to add new launchImage for iphoneX

Portrait size: 1125px Ă— 2436px Landscape size: 2436px Ă— 1125px