BodyScroll and safe-area-env

[nycco]

Hello,
Thank you so much for your React PWA project with Vite! It's an excellent foundation! I would like to seek your expertise on two specific points:

Disabling bodyscroll on Safari iOS:
I’ve tried various approaches to disable body scrolling on Safari iOS, but so far, I haven't found a satisfactory solution. Do you have any recommendations or tips on how to achieve this effectively? The goal is to have the app behave like a Native app.

Using environment variables for the body's safe area:
To ensure better integration with smartphones and their notches, I'm looking for a clean way to use environment variables to handle the body's safe area in the PWA. Do you have any advice or best practices to share on this matter?

Thank you very much!

[MengLinMaker]

Hi nycco,

I appreciate your feedback.
I'm not sure if I understood your questions:

1. Disabling bodyscroll on Safari iOS:
1.1 Did you want to remove the scroll bar? - refer to this
1.2 Hiding overflowed content?

2. Using environment variables for the body's safe area:
No idea what you mean by environment variables - this usually refers to the variables defined in a ".env" file.

With the "safe-area", I find any HTML elements placed near the top of the webpage to behave well.
The phone will automatically resize the view height and width if CSS specifies "width: 100vw" and "height: 100vh"

Adding sticky footers is tricky.
There are new CSS units designed to deal with changing viewport heights: dvh, lvh, svh
I've tried them, but dvh does not resize to "safe-area" as expected on iOS safari.