[css-env-1] Maximum safe area inset values to allow sliding bottom bar

[flackr]

On some platforms, the safe-area inset can change dynamically while scrolling. For example, when the browser viewport extends to the bottom of an Android or iOS mobile screen, there is usually a system bar drawn on top of the content which also consumes input events which would prevent users from being able to read / interact with that content.

Sites creating bottom bars use the safe area to avoid overlapping this. However, if this requires a relayout it can result in a jittery experience, (e.g. see the linked demo on the chromium intent)

I created a demo site to show an example of two approaches times two positioning methods developers can use to create bottom bars that avoid this area:
https://flackr.github.io/web-demos/css-env/safe-area-inset/index.html

Using the bottom property to avoid the area in theory allows the browser to apply this as a translation similar to static sticky / fixed position offsets:

.footer {
  position: fixed;
  background: gray;
  bottom: env(safe-area-inset-bottom, 0px);
}

However, this means that when the safe area is greater than 0, you will be able to see behind the footer's background. Using padding would grow the footer, however means that updating the footer is no longer an easily compositable effect. I think it would be useful to give developers the maximum safe area inset so that they could size the footer to the maximum size so that it can simply slide up when needed, e.g.:

.footer {
  position: fixed;
  background: gray;
  padding-bottom: env(safe-area-max-inset-bottom, 0px);
  bottom: calc(env(safe-area-inset-bottom, 0px) - env(safe-area-max-inset-bottom, 0px));
}

This would ensure that there is extra space reserved in the footer, positioned offscreen when not needed. The linked demo shows this approach using an assumed oversized maximum inset.

TLDR; can/should we add the maximum dynamic inset so developers can easily create a bottom bar just large enough to slide up when needed?