Odtnhj

I'm using the CSS variable safe-area-inset-top in my Cordova app to handle iPhone X safe area:

body 
 padding-top: env(safe-area-inset-top);

Works as expected when the app boots up. However, when I enter and exit a full screen (forced landscape) AVPlayer via a custom plugin, and return to the portrait app, the padding is gone and my app is partially cut off.

I'm currently using this in my AVPlayerViewController class within the plugin on iOS.

LandscapeVideo.m

- (UIInterfaceOrientation)preferredInterfaceOrientationForPresentation 
 return UIInterfaceOrientationLandscapeRight; // or LandscapeLeft


- (UIInterfaceOrientationMask)supportedInterfaceOrientations 
 return UIInterfaceOrientationMaskLandscape;

Thanks in advance for any help / ideas!

Fix for iPhone X/XS screen rotation issue

On iPhone X/XS, a screen rotation will cause the header bar height to use an incorrect value, because the calculation of safe-area-inset-* was not reflecting the new values in time for UI refresh. This bug exists in UIWebView even in the latest iOS 12. A workaround is inserting a 1px top margin and then quickly reversing it, which will trigger safe-area-inset-* to be re-calculated immediately. A somewhat ugly fix but it works if you have to stay with UIWebView for one reason or another.

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. It doesn't necessarily have to be "1px". You can pick a value that doesn't cause your UI to flicker but achieves its purpose.

As seen in the notes about device orientation of this answer:
https://stackoverflow.com/a/46232813/1085272

There is a safe-area-inset-xxx issue after some orientation changes when using uiWebView (which is default).

Switching to WKWebView (e.g. by using cordova-plugin-wkwebview-engine) fixed the issue for me.