env(safe-area-inset-*) not working

[marcelxpfeifer]

Inside the browser in capacitor the env(safe-area-inset-*) is set to 0px. Even if the device has a safe area.
I know in older capacitor versions this used to work. Are the some workarounds in place? Should I open up an issue?

The styling:

 body {
        background-color: red;
}
.content {
        margin-top: env(safe-area-inset-top);
        margin-bottom: env(safe-area-inset-bottom);
        height: 100%;
        background-color: white;
        font-size: 60px;
        color: black;
        display: flex;
        align-items: center;
        justify-content: center;
}

The result:

[marcelxpfeifer]

Fixed with

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

[jowparks]

Thanks, the default generated html had <meta name="viewport" content="width=device-width, initial-scale=1.0> which wasn't working

[socialmedialabs]

Thanks man, really saved my day! This should actually be a heads up part of the docs.

[Merwan1010]

Cant agree more