You are viewing a plain text version of this content. The canonical link for it is here.
Posted to issues@cordova.apache.org by "Jacob Weber (JIRA)" <ji...@apache.org> on 2018/03/06 23:45:00 UTC
[jira] [Created] (CB-13956) InAppBrowser safe-area-inset margins
wrong on iPhone X
Jacob Weber created CB-13956:
--------------------------------
Summary: InAppBrowser safe-area-inset margins wrong on iPhone X
Key: CB-13956
URL: https://issues.apache.org/jira/browse/CB-13956
Project: Apache Cordova
Issue Type: Bug
Components: cordova-ios, cordova-plugin-inappbrowser
Affects Versions: cordova-ios 4.5.0
Environment: Mac OS 10.13.3, cordova-cli 8.0.0, node 8.9.4
Reporter: Jacob Weber
Assignee: Suraj Pindoria
Attachments: 1. portrait.png, 2. landscape.png, 3. portrait.png, CordovaTest.zip
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:
{code:java}
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{code}
Then to make it work on the iPhone X, create a 2732x2732 image and add it to config.xml:
{code:java}
<splash src="res/screen/ios/Default@2x~universal~anyany.png" />{code}
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 on some web server:
{code:java}
<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>
{code}
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("https://myserver.com/test.html", "_blank");}}
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.
--
This message was sent by Atlassian JIRA
(v7.6.3#76005)
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org