Phone X safe area issues in ionic 1 UIWebview

[malwatte]

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) <ion-nav-bar class="bar-positive">
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.

[nickstucko]

Unfortunately, this is a known bug with UIWebview, and is apparently not an issue with Ionic v1. Here is the open radar report: http://www.openradar.me/34518947

I guess we have to wait for Apple to fix UIWebview.

If you can not use WKWebView in your app - one option is to lock the screen orientation to portrait and also set the app to full screen (no status bar). Obviously this is not an ideal workaround, but maybe would work for you in the short term.

[malwatte]

oh :(

[enzo-vezzaro-eleva]

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

• cordova-plugin-ionic-webview

Try to remove and reinstall this plugin

[Sunilchhipa]

@malwatte: Did you fixed this issue? How? I am having the same issue.

[samithaf]

Hi guys if you trigger a force reflow you can get away with this nasty bug. E.g. set top 1px and then remove after 100 ms.

[Sunilchhipa]

@samithaf: Can you please add code here?

[malwatte]

@Sunilchhipa , Consider moving to Ionic 3/4 if you are still using Ionic 1. My solution was that.

[samithaf]

@Sunilchhipa

Here is a sample code and you can optimise the code block to only run on iPhonex. Just add this code snippet to a Angular.js run block.

window.addEventListener("orientationchange", function() {
    var $tab = document.querySelectorAll('ion-tabs');
    if ($tab.length > 0) {
        $tab[0].style.top = "1px";
        $timeout(function() {
            $tab[0].style.top = 0;
        }, 100);
    }
});

[Sunilchhipa]

@samithaf: Thanks..!!

[austinemayer]

@malwatte, What version of 3/4 fixed your issue. Im running 4.1.2 and its still broken. It seems like I have tried all of the "tricks" and nothing has been successful.

[samithaf]

@austinemayer give a try by force reflow. Looks it take a while to set safe area inset prop when device rotation occurs

[malwatte]

@austinemayer, Im on Ionic 3.9.2. It works fine on iPhone X. You need to use ionic-webview too.

[austinemayer]

@malwatte Yeah that was the problem. I did not reinstall the ionic-webview plugin. Thanks for your help!

[yyl000]

Similar to the workaround posted above, this is what I used for my Ionic 1 project and it fixed the iPhone X/XS screen rotation issue:

window.addEventListener("orientationchange", function() {
    var originalMarginTop = document.body.style.marginTop;
    document.body.style.marginTop = "1px";
    setTimeout(function () {
        document.body.style.marginTop = originalMarginTop;
    }, 100);
}, false);

The purpose of the code is to cause the document.body.style.marginTop to change slightly and then reverse it, which will force the safe-area-inset-* to re-calculate immediately. It doesn't necessarily have to be "1px". You can pick a suitable value that doesn't cause your UI to flicker but achieves it purpose.

It fixes the following two issues: (1) header bar too tall when rotated to landscape, and (2) header bar obscured by the "notch" when rotated back to portrait.