v135 · css

safe-area-max-inset-* variables

In https://chromestatus.com/feature/5174306712322048 we've added dynamic safe area insets which can change as the user interacts with the device. This proposal amends the general safe area feature to add max-area-safe-inset-* variants of the variables which do not change and represent the maximum possible safe area inset. The use case this solves is to av

concepts

  1. Static "max" safe-area variables

    Phone mock showing the new env(safe-area-max-inset-bottom) stay constant while the dynamic inset would shrink and grow with the URL bar.

  2. Why the bottom bar used to jitter

    Side-by-side phones: the dynamic-inset version visibly jumps as the URL bar comes and goes; the max-inset version stays stable. The explicit problem behind the new variables.

  3. Inset snapshot stage

    A schematic phone with two dashed safe-area rectangles — green for the dynamic inset, blue for the max inset. Toggle the URL bar and watch the green box shift while the blue box holds steady.

  4. Device Frame Inspector

    Pick a device profile (iPhone 14 Pro, iPhone 12, Android Tablet, flat screen) and see dynamic vs max inset values side by side. Blue dashed overlay = dynamic; green dashed = max. Includes a generated CSS snippet using env(safe-area-max-inset-bottom).

why it shipped

This feature extends dynamic safe area insets (https://chromestatus.com/feature/5174306712322048) by providing a static safe-area-max-inset-* set of properties. These properties are static and represent the max value for the dynamic properties. It allows developers to create effects where the bottom bar slides instead of growing while remaining composited.

references