The in-app browser doesn't use the correct margins on an iPhone X, if you try to use viewport-fit=cover along with the safe-area-inset-* constants.
Then to make it work on the iPhone X, create a 2732x2732 image and add it to config.xml:
and add viewport-fit=cover to the viewport tag of www/index.html.
Finally, create an HTML page to load in the in-app browser, and store it as www/sample.html:
Now launch this on an iPhone X simulator running iOS 11.2, attach a Safari debugger, and open the page in an in-app browser, e.g. window.open("sample.html", "_blank");
(In the attached app, you can just tap the Cordova icon to open it.)
The attachments show what you'll see.
- Starting in portrait, the borders look correct.
- Rotate to landscape, and the left/right safe-area margins aren't applied.
- Rotate back to portrait, and now things are different. The left/right sides have safe-area margins when they shouldn't, and the top doesn't have one when it should.
If you load the same page directly in Safari, it behaves as expected.
The gray status-bar overlay gets in the way of seeing exactly what's happening; see CB-13583.