demo · v135

Static "max" safe-area variables

Chrome 135 adds safe-area-max-inset-top/right/bottom/left. Unlike the dynamic variants, these never shrink while UI chrome appears and disappears — perfect for letting a bottom bar slide in/out of the safe area instead of growing.

safe-area-max-inset-*: ?
nav · dynamic safe-area

your env() values

probing…

the code

.bar {
  /* Pin the bar to the screen edge */
  padding-bottom: env(safe-area-max-inset-bottom, 16px);
}
@media (orientation: portrait) {
  /* Even when the URL bar appears, padding stays at the max — no jump. */
  .bar { padding-bottom: env(safe-area-max-inset-bottom); }
}

see also