Phone X safe area issues in ionic 1 UIWebview


#1

I was using ionic 1.2.4 and followed https://blog.ionicframework.com/ios-11-checklist/ 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 https://github.com/apache/cordova-plugin-statusbar

  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.


#2

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

  • cordova-plugin-ionic-webview

Try to remove and reinstall this plugin


#3

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