env(safe-area-inset-bottom) is the CSS constant on Safari iOS that lets you reference the size of the Home Bar on the bottom of the screen. That way, you can set up some kind of spacer so your content is ABOVE that bar. This is a very useful thing, since not all phones and even not all iphones have this on screen bar.
But in order to use it, you must have the metatag setup with `viewport-fit=cover` on your page (and I think it only works when a site is added as an app icon).
The problem is that, while there are also constant spacers for the left and right side, the default behavior for the sides without the `viewport-fit=cover` metatag is to basically have background color spacers on the left and right that are NOT actually part of your page. Like the "browser window" is not full screen edge to edge, and theres just a little filler on each side. This is the area of the screen where the corners are, and where the camera cutout is. If you use `viewport-fit=cover`, then these automatic spacers are gone and the page loads full width to the screen, rendering beneath the rounded corners and beneath the camera cutout in the display. (Beneath in the 3D meaning of the word). There are also CSS constants to give you the size of these dead zones on the side so you can use those as padding or margins and work around them.
So all of that very long explanation of what all this stuff is, just to say that I very much prefer the automatic side spacing you get when you do NOT use `viewport-fit=cover` but I prefer and even really require the bottom spacing you get when you DO use `viewport-fit=cover`. Adding a bottom margin to a footer using the CSS constant is very easy and makes sure your buttons aren't under other system buttons.
But using the CSS side constant's to add side padding is a lot more complicated. I have lots of floating objects and things that are 100% width. Lots of things break when you try to add your own side padding. It makes everything significantly easier to just let the browser add it's own spacing that's not part of the web page.
So is there a way to get the best of both worlds?
Does this whole post even make sense? Its very much in the weeds I know. But it's an apple thing and like all apple things, the documentation is slim because "it just works". ugh.
