Cordova : Inappbrowser breaks UI while Screen orientation changes from landscape to portrait on iOS

Question

I am developing app using cordova 5.4.1, Also I am using latest InAppBrowser plugin. Below are the steps to reproduce the issue.

1. Open the URL in InAppBrowser
2. Change the app orientation from portrait to landscape
3. Press done button of InAppBrowser and check the app in landscape mode only, you will get some blank portion

I am using iOS 9.2.1

Please let me know if some one has faced same issue and got fixed.

Thank you in advance.

Answer 1

I know it's a bit late but I wanted to share how I fixed this in case you or anyone else is having this issue.

As noted in the issue mentioned in jcesarmobile's comment, it appears that cordova-plugin-statusbar & cordova-plugin-inappbrowser don't play nice together. The ticket status says resolved, although I'm still having this problem. To fix it you can either delete the plugin, or, if you need the plugin then you can add an event listener to hide then show it again on exit:

openUrl(url) {
  let ref = cordova.InAppBrowser.open(url, '_blank', options);

  ref.addEventListener('exit', () => {
    StatusBar.hide();
    StatusBar.show();
  })
}

StatusBar.hide() is what fixes the issue.

EDIT: As noted by René in the comments of this similar issue , a blank column exists in iPad with the fix noted above. In order to completely fix the issue in both iPhone and iPad without having to remove the plugin, wrap the StatusBar.show() call inside a setTimeout of a second:

openUrl(url) {
  let ref = cordova.InAppBrowser.open(url, '_blank', options);

  ref.addEventListener('exit', () => {
    StatusBar.hide();

    setTimeout( () => {
      StatusBar.show();
    }, 1000)
  })
}