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

Statusbar does not overlay correctly for iOS 11 and iPhone X

    XMLWordPrintableJSON

    Details

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

      iOS 11

    • Flags:
      Patch

      Description

      Status Bar iOS 11 issues:

      1. Status Bar does not "crop" correctly on iOS 11 when "StatusBarOverlaysWebView" is set to true
      2. No property or support to allow for web view to use the whole iPhone X screen Top & Bottom

      Recommendation:

      1. Use safeAreaInsets to correctly adjust iOS 11 web view correctly
      2. Allow new property to support iPhone X full screen

      Fixes applied (Pending Review)
      #Added new property "StatusBarCropsWebview" to allow iPhone X to display edge to edge using the "safeAreaInsets" top and bottom. By default this will be set as "true" and crop the webview below and above the safe areas
      #When "StatusBarCropsWebview" is set to false. The web view will extend to the correcr full screen on iPhone X. However, is the "StatusBarOverlaysWebView" is to false. This will only extend the web view at the bottom edge
      #If both StatusBarCropsWebview and “StatusBarOverlaysWebView” are set to false this will extend the screen top and bottom edge.
      #Added fix for iOS 11 gap problems. If “StatusBarOverlaysWebView” is set to false, this now fixes the 20px bottom gap.
      #Added fix for iOS 11 gap after status bar is set to hidden after showing. This now fixes the 20px bottom gap.

      Screenshots of Fixes:
      1. Default where StatusBarCropsWebview = true and StatusBarOverlaysWebView = false

      2. Where StatusBarCropsWebview = false and StatusBarOverlaysWebView = true

      3. Where StatusBarCropsWebview = false and StatusBarOverlaysWebView = true

        Attachments

          Issue Links

            Activity

              People

              • Assignee:
                Unassigned
                Reporter:
                BrainstemStudio Sean Molyneaux
              • Votes:
                0 Vote for this issue
                Watchers:
                2 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Time Tracking

                  Estimated:
                  Original Estimate - 24h
                  24h
                  Remaining:
                  Remaining Estimate - 24h
                  24h
                  Logged:
                  Time Spent - Not Specified
                  Not Specified