Status bar overlays webview on iOS with Capacitor - ios

Question

I would like to achieve the same behavior of statusbar as in the capacitor example, i.e. automatically add the correct padding so my app content doesn't display inside the status bar.
However, I don't use the ionic framework but angular and the status bar overlays the webview of my application. Therefore, the content of my app is visible in the status bar.
I was expecting a method that allows to change this behavior (as the _ overlaysWebView_ method of ionic native status bar).
I also tried to add <preference name="StatusBarOverlaysWebView" value="false" /> in the config.xml file but I don't know if I should install the cordova statusbar plugin or not.
Maybe I shouldn't change this configuration and just play with padding, but then I don't know how to handle the different status bar height on different iOS devices.
I'm new to Capacitor and I never used Ionic nor Cordova. I someone could help me deal with this problem, I would be very grateful.

Answer 1

I have also had this issue on some applications I have worked on in the past ond only recently found a clean, less hacky way of fixing it. You will have to add the safe-area-inset-* where * can be left, right, top or bottom. This accounts for where the notch position will be when the device is either in portrait or landscape mode.
You can learn more about this by looking at this answer https://stackoverflow.com/a/47895315/4687451

Answer 2

You can set the padding of your directly in your css code thanks to the env variables. It works only on iOS so it can be applied on any tag you need.
body{
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

Answer 3

This could be achieved by adding following line in CAPViewBridgeController file
webView?.frame.origin = CGPoint(x: 0, y: UIApplication.shared.statusBarFrame.size.height)
webView?.frame.size.height = UIScreen.main.bounds.size.height - UIApplication.shared.statusBarFrame.size.height;
Search for below function and update. The function should look like this
extension CAPBridgeViewController: CAPBridgeDelegate {
internal var bridgedWebView: WKWebView? {
webView?.frame.origin = CGPoint(x: 0, y: UIApplication.shared.statusBarFrame.size.height)
webView?.frame.size.height = UIScreen.main.bounds.size.height - UIApplication.shared.statusBarFrame.size.height;
return webView
}
internal var bridgedViewController: UIViewController? {
return self
}
}