Statusbar to overlay the webview on iOS

3
Hi, we're upgrading our mobile hybrid app from uiwebview to wkwebview. It works properly except there's a whitebar (20px) at bottom of the screen. The reason for this is because we enabled the statusbar to overlay the webview in the phonegap configuration. We enabled this to change the color of the statusbar with custom ccs. This issue does not occur if downgrading to uiwebview or when the StatusBarOverlaysWebView option is set to false, which is the default. Do you use the statusbar overlay webview option or have more info?  Edit: see answer below
asked
2 answers
3

Went down the rabbit hole and ended up with this workaround. You need to change the main div of the hybrid app. The safe-area-inset-top are predefined variables for iOS that determines the “safe area” perimeters. 

.mx-hybridapp {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    bottom: calc(0px - constant(safe-area-inset-top));
    bottom: calc(0px - env(safe-area-inset-top));
}

 

answered
2

Hi Wilfried, 
 
I had the same issue and I solved that with replacing default Status bar plugin in PhoneGap package with the following workaround:
 
   <plugin name="cordova-plugin-statusbar" source="npm" spec="https://github.com/timetocodeNL/cordova-plugin-statusbar.git#8b4acd2e56a01cd22a240668d3c269e129764b6b" />  
 
I think that if you use Xcode for creating ipa files, this issue doesn't appear.
 
Regards.

answered