demo · v135

Why the bottom bar used to jitter on scroll

The use case behind the new safe-area-max-inset-* variables, straight from the Chrome blog: on mobile, the dynamic insets shrink and grow as the URL bar shows and hides. Layouts pinned to safe-area-inset-bottom visibly jump every time the user scrolls. Pinning to safe-area-max-inset-bottom instead reserves the larger inset up front — layout is stable, only the URL bar moves.

safe-area-max-inset: ?

dynamic safe-area (layout jumps)

https://example.com/article

nav · dynamic inset

max safe-area (stable)

https://example.com/article

nav · max inset

the code

/* old, jittery */
.bar { padding-bottom: env(safe-area-inset-bottom, 16px); }

/* new in Chrome 135 — layout stable across URL-bar transitions */
.bar { padding-bottom: env(safe-area-max-inset-bottom, 30px); }

the code

see also