Details
-
Bug
-
Status: Open
-
Major
-
Resolution: Unresolved
-
cordova-ios 4.5.0
-
None
-
None
-
Mac OS 10.13.3, cordova-cli 8.0.0, node 8.9.4
Description
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.
To reproduce:
cordova create CordovaTest com.sample.cordovatest CordovaTest cd CordovaTest cordova platform add ios@4.5.4 cordova plugin add cordova-plugin-inappbrowser cordova plugin add cordova-plugin-statusbar
Then to make it work on the iPhone X, create a 2732x2732 image and add it to config.xml:
<splash src="res/screen/ios/Default@2x~universal~anyany.png" />
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:
<html> <head> <meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover" /> <style> html { background-color: #00FFFF; } body { border: 1px solid red; margin-top: env(safe-area-inset-top); margin-bottom: env(safe-area-inset-bottom); margin-left: env(safe-area-inset-left); margin-right: env(safe-area-inset-right); } </style> </head> <body> </body> </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.
