[CB-13291] Statusbar does not overlay correctly for iOS 11 and iPhone X

• Type: Bug
• Status: Closed
• Priority: Major
• Resolution: Duplicate
• Affects Version/s: cordova-ios 4.5.0
• Component/s: cordova-plugin-statusbar
• Labels: iOS11 iPhoneX

Environment

iOS 11

• Flags: Patch
• Assignee: Unassigned
• Reporter: Sean Molyneaux
• Created: 17/Sep/17 08:26
• Updated: 17/Sep/17 14:18
• Resolved: 17/Sep/17 14:18

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

Issue Links

• links to: GitHub Pull Request #86