What safe-area insets mean
Safe-area insets are CSS environment values such as env(safe-area-inset-top) and env(safe-area-inset-bottom). They represent extra spacing a layout may need so important controls are not hidden behind cutouts, rounded corners, home indicators, or browser UI edges.
Why values can be zero
A zero value does not always mean the checker is broken. Desktop browsers, rectangular screens, non-edge-to-edge pages, and some browser states can report zero because no extra safe padding is needed for the current viewport.
When to use viewport-fit cover
On iOS, edge-to-edge layouts commonly use a viewport meta tag with viewport-fit=cover. This allows the page to extend into the full display area while safe-area insets describe where content should avoid the edges.
How to test edge-safe UI
Test sticky bottom navigation, floating CTAs, chat inputs, headers, and full-screen panels on real mobile browsers. Pair safe-area measurements with visual viewport width, height, offsets, and dynamic viewport units.
Safe-area CSS examples
Combine safe-area values with normal spacing so desktop, Android, and iOS layouts all stay comfortable.
Edge-safe app shell
.app-shell {
padding-top: max(16px, env(safe-area-inset-top));
padding-right: max(16px, env(safe-area-inset-right));
padding-bottom: max(16px, env(safe-area-inset-bottom));
padding-left: max(16px, env(safe-area-inset-left));
}| UI element | Safe-area value to check | Why it matters |
|---|---|---|
| Sticky header | Top | Avoid notches and rounded top corners. |
| Bottom tab bar | Bottom | Keep controls above the home indicator. |
| Landscape side panel | Left / Right | Avoid curved edges and camera cutouts. |
Checklist
- ✓ viewport-fit=cover reviewed for edge-to-edge pages
- ✓ Top, right, bottom, and left insets checked
- ✓ Sticky footer or bottom CTA tested
- ✓ Landscape orientation tested
- ✓ Visual viewport changes checked with browser chrome and keyboard
- ✓ Fallback padding added for zero-inset browsers