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, 

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{code}
Then to make it work on the iPhone X, create a 2732x2732 image and add it to 
<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:
  <meta name="viewport" content="initial-scale=1, width=device-width, 
height=device-height, viewport-fit=cover" />
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);

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

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

Reply via email to