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

Webview is sized incorrectly on iPhone X (Simulator)

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Major
    • Resolution: Not A Bug
    • Affects Version/s: cordova-ios 4.5.0
    • Fix Version/s: None
    • Component/s: cordova-ios
    • Labels:
    • Environment:

      Xcode 9.0 (9A235)
      Simulator 10.0 (SimulatorApp-829.6) - iPhone X

      Description

      New app with cordova-ios@4.5.0 (using default UIWebView) running on iPhone X Simulator does not size correctly, leaving black areas above and below the app content and white bars between the black areas and app content.

      Adding cordova-plugin-wkwebview-engine so Cordova uses WKWebView, white bars go away, but the black areas remain:

      Setting

      viewport-fit=cover

      fixes the white bar issue with UIWebView, as outlined here http://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/, but the black areas remain:

      Simulator Screen Shot - iPhone X - 2017-09-14 at 15.52.54.png

      Attached Cordova project illustrates the issue.

        Attachments

        1. fig1.png
          20 kB
          Sergey Smirnov
        2. fig2.png
          18 kB
          Sergey Smirnov
        3. Simulator Screen Shot - iPhone X - 2017-09-14 at 15.52.54.png
          121 kB
          Dave Alden
        4. Simulator Screen Shot - iPhone X - 2017-09-15 at 09.20.48.png
          95 kB
          Dave Alden
        5. Simulator Screen Shot - iPhone X - 2017-09-19 at 11.29.00.png
          145 kB
          Mike Hartington
        6. webview-test.zip
          11.61 MB
          Dave Alden

          Activity

            People

            • Assignee:
              shazron Shazron Abdullah
              Reporter:
              dpa99c Dave Alden
            • Votes:
              1 Vote for this issue
              Watchers:
              10 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: