1

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!

Hiimdjango
  • 431
  • 5
  • 21

3 Answers3

0

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

fer0n
  • 295
  • 1
  • 5
  • 14
  • Thank you for the answer, I ended up creating a Hook to check wether or not it's a PWA and dynamically adding the padding. – Hiimdjango Jul 24 '22 at 01:45
  • @AhmedBendaya How do you check that? You have to know that it’s a device with notch, that it is running either on the homescreen as a PWA or in Safari, but you also have to know the settings in safari, since the Toolbar has to be on top for the bottom safe area to make sense. As I said, I’ve got it to work with the “body has to scroll” part (even in a pwa) only it didn’t work for the webpack/react project but there might be a config or something webpack is doing that interferes with it. I gave up on it eventually. – fer0n Jul 25 '22 at 04:40
  • I'm only checking if the display mode is standalone, and I'm applying some padding to the bottom. I don't really care about the notch in the top case by default the body starts at the bottom of the top safe area on Iphone, so it works for now.. I'll let you know if I find any good solution – Hiimdjango Aug 01 '22 at 00:41
  • That'd be great, thanks :) When I said "device with notch" I wasn't talking about the notch specifically, those devices also have the home indicator at the bottom. If you add padding there, how do you make sure you're not adding padding to devices that don't need it (such as the iPhone SE)? I'm guessing it's just there on all devices – fer0n Aug 02 '22 at 10:10
  • some update: I ended up creating a new project with react 18 and migrated my code, looks like the env(safe-area-inset-...) is working! I have no idea why and how, NOTE: I created the project using the --template PWA – Hiimdjango Aug 13 '22 at 01:59
0

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",
Hiimdjango
  • 431
  • 5
  • 21
0

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.

an_parubets
  • 589
  • 7
  • 15