Phone X safe area issues in ionic 1 UIWebview

I was using ionic 1.2.4 and followed to fix my app for iPhone X. Then I tested in iPhone X simulator and there are positioning issues in UI. To make sure issues are not due to my custom css or JS, I created a new ionic 1 project and tested. But issues exists there too.

cordova cli: 8.0.0
ionic cli: 3.19.1
xcode: 9.2

This is what I did,

  1. Created a new project
    ionic start "Ionic1" tabs --type ionic1

  2. Updatd bower.json. “ionic”: “ionic-team/ionic-bower#1.3.5”
    bower install

  3. Removed cordova-plugin-ionic-webview from config.xml since we do not use it.

  4. Fixed the index.html to add viewport-fit=cover
    <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">

  5. Changed the narbar color. (To identify the title bar easily)

  6. Added statusbar plugin
    ionic cordova plugin add

  7. Added the platform and built the app
    ionic cordova platform add ios
    ionic cordova build ios

8 Then I opened the xcode project and ran in iPhone X.
opened the app.

Changed the orientation to landscape.

Changed the orientation back to portrait and this happened.

issue 1: UI (header and footer) gets mispositioned in portrait after orientation change.
issue 2: Landscape titlebar is too high.

Then I added cordova-plugin-ionic-webview plugin and it worked fine.

Looks like safe regions are not working properly in UIWebview.

Please help.

If anybody needs, I was able to fix this by upgrading:

  • cordova-plugin-ionic-webview

Try to remove and reinstall this plugin

But Ionic 1 does not work well with WebKitWebview. My solution was to migrate to Ionic 2+.