Status bar overlays webview on iOS with Capacitor

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.

score 0 · Answer 1 · answered Jun 28 '20 at 09:20

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

score 0 · Answer 2 · answered Aug 29 '21 at 05:44

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);
}

milind mistry · Answer 3 · 2023-01-09T04:00:46.267

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
    }
}

Duc Vu Nguyen · Answer 4 · 2023-04-24T00:03:13.020

CapacitorJs makes the WebView fill the whole device screen which makes your web content layout underneath the toolbar. This issue still happened for iOS 16.1.2 / Capacitor 4.7.1.

One way to fix this is by adding a top padding or top margin to your SPA to push your content away from the toolbar. Add this to your index.html:

  <head>
      <!-- Set viewport-fit to cover, this enables `env(safe-are-insect-*)` variables -->
      <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  </head>
  <!-- 
      Then use the `env(safe-area-insect-*)` variables 
      to push your content away from the toolbar
      how to do it depends on how you layout your app.
      This is just an example. 
  -->
  <body style="padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);">
    <app-root></app-root>
  </body>

Status bar overlays webview on iOS with Capacitor

4 Answers4