Phone X safe area issues in ionic 1 UIWebview

@nirman99 wrote:

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.

Screen Shot 2018-01-25 at 12.27.06 PM.png443x909 50.3 KB

Changed the orientation to landscape.

Screen Shot 2018-01-25 at 12.28.11 PM.png870x464 49 KB

Changed the orientation back to portrait and this happened.

Screen Shot 2018-01-25 at 12.31.30 PM.png435x900 49 KB

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.

Posts: 1

Participants: 1

Read full topic