Bug 190771 – Safe area inset environment values should be available at all times, not just when viewport-fit=cover.

• Status: NEW
• Component: CSS

[Justin Michael]

These safe area insets should all be available for use regardless of viewport-fit:

env(safe-area-inset-left)
env(safe-area-inset-right)
env(safe-area-inset-top)
env(safe-area-inset-bottom)

One major use case: A fixed element with bottom: 0 will be under the home indicator on an iPhone X. Fixing it currently requires significant work because viewport-fit must be set to cover to access the safe area inset required, but doing so also requires adding CSS to adapt the entire site to account for the safe area. What should be one line of CSS balloons into tens or even hundreds depending on the complexity of the rest of the page/site.

[Tim Horton]

I don't think we necessarily want to conflate the two things, but I agree that some env() variables to get the unusable/untappable region (say, for example, also the untappable region at the bottom of the screen due to iOS Safari's bottom button bar).

[Nikola Tucaković]

iOS 13 Safari does seem to have these variables available.

But that still hasn't solved Safari's bottom bar jumping out when clicking within that area, because bottom safe area of 16px is way lower than something around 44px which is what we need to get for the bottom bar.

I attempted to mitigate this with something like:
padding-bottom: calc(44 * (env(safe-area-inset-bottom) / env(safe-area-inset-bottom)))

But we can't do 16px / 16px division in calc function.

Are there any other env variables available in latest update?

[Tim Horton]

No, safe-area-inset constants are not intended to solve the hidden-toolbar-reveal-area problem, and no, there is no easy alternative solution at the moment, sorry.

[Nikola Tucaković]

Sorry for bumping the thread again, I can't edit my comment anymore, but managed to find CSS only solution:

the value we want
when env variable
exists
      ^
calc((45 / 34) * max(0px, env(safe-area-inset-bottom)))
           ^
       the value of env
       variable on iOS 13
       Safari in portrait mode

This way we can force CSS value of 45px (or any other) on iOS portrait, which is what my task was. If there's no variable set, it'll be multiplied by 0 and won't add any additional padding.

I'm not sure whether it's the last update, but Safari bottom bar jumps out until I raise the padding to 70px, which is just way too much and looks really bad.