If you don’t account for the safe area, controls will be hidden by the notch or home bar on iOS/Android. Here’s how to fix it (with a live demo and common pitfalls).
The problem
On modern phones, system UI can overlap your content—unless you add padding for the display notch or bottom home indicator. If you place controls in these areas, users may not be able to see or tap them.
Why it matters
- On iOS Safari PWA or web apps, controls can land under the notch (the black cutout) or the home indicator, making actions unusable.
- Android devices with gesture nav or camera cutouts have the same issue.
- If you ignore the
env(safe-area-inset-*) CSS values, your controls will be overlapped on some devices.
Checklist
Pitfalls
- Forgetting
viewport-fit=cover: without this, env(safe-area-inset-*) returns 0 in Safari.
- Using
constant() instead of env(): constant() was only for old iOS 11.2.
- Apply the insets to the fixed bars, not content if you want controls aligned to the physical safe area edge.
- Some desktop browsers always return 0 for these variables; that’s why you should simulate with a custom CSS variable for demos/tests.
Quick test
Use the
Safe areas (notches) demo to see how notches and home indicators overlap UI. Flip the “Simulate notch” toggle to preview the issue!
Demo link