Capacitor-JS status bar overlaps in IOS

Question

I'm using NuxtJS with capacitor. The top status bar on iOS devices overlaps when we scroll. I also added "ios": {"contentInset": "always"} in Capacitor.config.json.

Although I also included the CSS, it creates extra space at the top.

body {
   padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
     env(safe-area-inset-left);
 }

Answer 1

This can be achieved by adding the following lines in the 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 the following functions 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
    }
}