Uploaded image for project: 'Apache Cordova'
  1. Apache Cordova
  2. CB-13956

InAppBrowser safe-area-inset margins wrong on iPhone X

    Details

    • Type: Bug
    • Status: Open
    • Priority: Major
    • Resolution: Unresolved
    • Affects Version/s: cordova-ios 4.5.0
    • Fix Version/s: None
    • Labels:
      None
    • Environment:

      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.

      1. Starting in portrait, the borders look correct.
      2. Rotate to landscape, and the left/right safe-area margins aren't applied.
      3. 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.

        Attachments

        1. 1. portrait.png
          84 kB
          Jacob Weber
        2. 2. landscape.png
          77 kB
          Jacob Weber
        3. 3. portrait.png
          82 kB
          Jacob Weber
        4. CordovaTest.zip
          42 kB
          Jacob Weber

          Activity

            People

            • Assignee:
              Unassigned
              Reporter:
              jweber Jacob Weber
            • Votes:
              1 Vote for this issue
              Watchers:
              3 Start watching this issue

              Dates

              • Created:
                Updated: