Capacitor Status Bar Overlaps Pleasw Helps

ruzlicali16 · December 26, 2020, 11:38am

Anyone how can i resolve this issue? When i use SetOverlaysWebView({ overlay: true }) then this is the result it overlaps my toolbar. Can anyone help me resolve this issue. I’m using Ionic 5 with vue 3.

tkclark · December 26, 2020, 5:45pm

I don’t think I have the official right answer, but in the past I remember having to adjust margin/padding on the top of the app before. In the variables.css I put:

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

Try that and see if it helps?

ruzlicali16 · December 27, 2020, 8:49am

It’s not working.

ldebeasi · December 29, 2020, 7:11pm

Hard to say what the issue might be without seeing your code. Can you push a minimal version of your app to a repo and post a link here?

max · December 29, 2020, 9:06pm

Make sure you have the correct viewport meta tag in your index.html:

github.com

ionic-team/starters/blob/c7950e75b482b47e8ac4dc9b1f7853c5e52cad74/vue/base/public/index.html#L10


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Ionic App</title>
    <base href="/" />
    <meta name="color-scheme" content="light dark" />
    <meta
      name="viewport"
      content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <link rel="shortcut icon" type="image/png" href="<%= BASE_URL %>assets/icon/favicon.png" />
    <!-- add to homescreen for ios -->
    <meta name="apple-mobile-web-app-capable" content="yes" />

ruzlicali16 · January 6, 2021, 4:58pm

Thanks Guys. It’s working now. Thanks for help!

Nobleeugene2005 · July 15, 2021, 8:29pm

Please, how did you fix it

TiBz0u · June 6, 2023, 9:19am

Hi @max ,
I’m on Capacitor v5 with Ionic last v6 and I encounter exactly the same problem on Android (12 or 13).

safe-area-inset-* doesn’t seems to be set.
Therefore ion-safe-area neither.

My viewport is well configured (Standard Capacitor Starter).

Is there any current work on that or any other hints?

Thanks in advance.
Kr.