Safe Area Handling

This walks you through handling iPhone notches, Dynamic Island, home indicators, and Android cutouts in Capacitor apps using CSS environment variables like safe-area-inset-top and safe-area-inset-bottom. You get concrete examples for headers, tab bars, and full-bleed layouts, plus React hooks and Vue composables if you need to read inset values in JavaScript. The CSS approach is usually cleaner since you can just use env() with calc() for combined padding, but the JavaScript solutions are handy when you need dynamic calculations. Don't forget viewport-fit=cover in your meta tag or the insets won't work. Most useful when users report content disappearing under the notch or home indicator on modern devices.

skills.sh installs: 1.4K
GitHub stars: 77
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add cap-go/capgo-skills --skill safe-area-handling --agent claude-code

Installs into .claude/skills of the current project.

Files

Safe Area Handling in Capacitor

When to Use

TRIGGER when:

Content renders under the status bar, notch, Dynamic Island, cutout, home indicator, or Android navigation/gesture bar
env(safe-area-inset-*) is 0px on Android, or correct only after rotation
Layout broke after Capacitor 8 upgrade or raising targetSdkVersion to 35/36
StatusBar.setOverlaysWebView / setBackgroundColor stopped working on Android
Landscape / split-screen / iPad windowed layouts have wrong side padding

Do not use:

Keyboard covering inputs: capacitor-keyboard
Ionic ion-header/ion-toolbar theming: ionic-design; Konsta safeAreas: konsta-ui
Tailwind plugin/utility setup: tailwind-capacitor
iOS scene sizing, UIScreen.main, multi-window: capacitor-ios-resizability
Splash screen colors: capacitor-splash-screen