v135 · css / mobile
Device Frame Inspector
Pick a device profile to see the difference between env(safe-area-inset-*) (dynamic, changes as UI chrome appears/disappears) and env(safe-area-max-inset-*) (stable maximum). The stable variant prevents layout jitter when content is pinned to the safe edge.
checking safe-area-max-inset-*…
env(safe-area-max-inset-bottom) always equals the largest possible value the safe-area-inset-bottom could take (e.g. when the URL bar is hidden). Using the max variant instead of the dynamic one prevents bottom-pinned toolbars from jumping when the browser chrome animates. Chrome 135 adds all four safe-area-max-inset-* variables.
Device profile
Safe area visualization
safe-area-inset (dynamic)
safe-area-max-inset (stable)
| Variable | Dynamic value | Max value | Use when |
|---|
Generated CSS