apache/cordova-plugin-statusbar

Plugin breaks with WKWebView Engine

Closed this issue · 13 comments

As lon as I'm using the standard WebView, the Overlay=true/false switch and background colour works perfectly. But when I add the WKWebview Engine Plugin to my Cordova project, it seems to ignore the status bar plugin entirely.

What is expected to happen?

should apply overlay true/false and background-colour

What does actually happen?

ignores these settings completely, as if plugin isn't even installed

Version information

Cordova ios 5.1.1
cordova-plugin-device 2.0.3 "Device"
cordova-plugin-statusbar 2.4.3 "StatusBar"
cordova-plugin-whitelist 1.3.4 "Whitelist"
cordova-plugin-wkwebview-engine 1.2.1 "Cordova WKWebView Engine"
phonegap-plugin-speech-synthesis 0.1.1 "SpeechSynthesis"

Checklist

  • I searched for existing GitHub issues
  • I updated all Cordova tooling to most recent version
  • I included all the necessary information above

SOLUTION:

I eventually solved this by uninstalling the WKWebView engine and using cordova-plugin-ionic-webview instead.

Also experiencing this. The viewport is leaving a statusbar-height-sized gap at the bottom of the screen. When I scroll content, it doesn't scroll within this bottom gap.

If I uninstall cordova-plugin-wkwebview-engine, then this bottom gap is removed and the viewport extends all the way to the bottom of the screen, as expected.

Screen Shot 2020-01-30 at 2 55 46 PM

I'm having the same exact problem, i.e., switched from UIWebView to WKWebView. See screenshot below.

It seems that the status bar elements are white, even though the cordova preference is set to lightcontent, i.e., elements should be dark. I tried other styles too, but it doesn't make a difference. And in Safari Inspector, window.StatusBar does nothing to change anything.

Is anyone looking at this issue, or is there a resolution?

Screen Shot 2020-02-11 at 3 08 53 PM

I have never personally worked on this plugin and other maintainers seem to be a bit overloaded. I would highly recommend you consider reaching out on Slack or on the mailing list, follow the links in the footer of cordova.io or cordova.apache.org.

I figured out it's caused by Dark Mode on iOS 13. It's related to this issue:
#148

The temporary resolution is to set plist key UIUserInterfaceStyle to Light.

Any news there?

I tried to specify the key UIUserInterfaceStyle as "light", but it doesn't work...

Please take a look at this #148 (comment)

Working workaround.

Also experiencing this.

cordova-lib@9.0.1

Requirements check results for ios:
Apple macOS: installed darwin
Xcode: installed 11.3.1
ios-deploy: installed 1.10.0
CocoaPods: installed 1.9.0

Anyone successfully set preferences on iOS 13.x with WKWebView yet?

<preference name="StatusBarBackgroundColor" value="#000000" /> <preference name="StatusBarStyle" value="blackopaque" />

Also experiencing this.

The status text is hidden but this grey bar is showing.
It's happening in iPhone 6,7,8,9,10,11 simulators and iPhone 6 device.

It wasn't showing when I was using UIWebView but now that WKWebView is required we have to use it for iOS.

Capture

Update: Looks like this was an InappBrowser plugin issue. Fixed that by adding this commit dpa99c/cordova-plugin-inappbrowser-popup-bridge@fb6c0cd

gap at the bottom

I have found the following workaround for this issue
https://stackoverflow.com/a/49122361/4208571
This worked for me

There are at least 3 different issues here, probably because the original reported one is not very clear.
For the statusbar text being always white, the problem is iOS 13 sets the "default" color based on the device mode. That's already fixed in master, default will always be black #169.
There is another PR to make default have the default behavior and instead use a new darkContent #181, so if you want that behavior, comment on #164, because last time I asked people wanted default to be black and not change based on the device mode.
For the gap on the bottom, thats a WKWebView "feature", to fix it you have to use viewport-fit cover and 100vh as height instead of 100%. see apache/cordova-plugin-wkwebview-engine#107
other one was a InAppBrowser bug.
The original bug is "not working on WKWebView", and I can't reproduce that, so I'm closing the issue.

Hello, any solution for this?

I eventually solved this by uninstalling the WKWebView engine and using cordova-plugin-ionic-webview instead.