Safe Area Handling

Handles the notch, Dynamic Island, home indicator, and display cutouts so your Capacitor app doesn't put content where users can't see it. The guide covers CSS environment variables like safe-area-inset-top with proper viewport-fit=cover setup, plus JavaScript solutions for reading insets dynamically and React/Vue hooks if you need programmatic control. It's especially helpful when building tab bars or full-bleed layouts where you want background colors to extend to screen edges but interactive elements to stay in safe zones. The examples are complete enough to drop into real projects, and it covers both portrait and landscape orientation changes.

skills.sh installs: 203
GitHub stars: 43
last updated: Jun 3, 2026

View on GitHub

Install

$ npx -y skills add cap-go/capacitor-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