[ 
https://issues.apache.org/jira/browse/CB-13956?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
 ]

Jacob Weber updated CB-13956:
-----------------------------
    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:
{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 as 
{{www/sample.html}}:
{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("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.

  was:
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.

The gray status-bar overlay gets in the way of seeing exactly what's happening; 
see CB-13583.


> 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
>            Priority: Major
>         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 as 
> {{www/sample.html}}:
> {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("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.



--
This message was sent by Atlassian JIRA
(v7.6.3#76005)

---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscr...@cordova.apache.org
For additional commands, e-mail: issues-h...@cordova.apache.org

Reply via email to