Why is the Safe Area in React PWA is always 0px?

Question

Hi I'am building a PWA with react and I've been trying to add a padding to my Footer to avoid the safe area, but for some reason it's always 0px;

I have these tags in HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta name="mobile-web-app-capable" content="yes">

And I'm trying to set the CSS like this for my footer:

padding-bottom: env(safe-area-inset-bottom);

It's always 0px!

Answer 1

I had the same issue and there are two things I found out:

• the body itself has to scroll (so no height: 100% or overflow: ... in any parent
• using the "hide toolbar" option isn't working, it has to scroll to set the padding correctly.

However, I'm still looking for a solution to fix it if you safe it to the home screen via the "Add to home screen" option. It's all very annoying.

env(safe-area-inset-bottom) not working in css

Answer 2

UPDATE: I never really figured out why it wasn't working and how to fix, but I ended up creating a new React 18 project using the npx create-react-app my-app --template cra-template-pwa-typescriptand it's working again.

Refer to this official doc for more info: create-react-app.dev

Here's my react version

"react": "^18.2.0",
"react-dom": "^18.2.0",

Answer 3

You must to add follow meta tag for fix this problem:

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

The viewport-fit CSS @viewport descriptor controls how a document's viewport fills the screen. The viewport is scaled to fill the device display. It is highly recommended to make use of the safe area inset variables to ensure that important content doesn't end up outside the display.