SafeArea
Applies CSS env() safe-area insets so content stays clear of device notches, home indicators, and rounded display corners.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <SafeArea />
Desktop / Android note
SafeArea is invisible on desktop browsers and most Android devices — env(safe-area-inset-*) resolves to 0px there. It only does real work on iPhones (notch / Dynamic Island / home indicator) and other devices with display cutouts where the browser runs in viewport-fit=cover mode.
When to Use
- Wrapping full-screen layouts on iPhones with notches or dynamic islands to avoid clipped content
- Fixing bottom navigation bars and action sheets that overlap the home indicator on notched devices
- PWAs and hybrid apps running in standalone mode where the OS chrome is absent
- Modals, drawers, and sheets that extend edge to edge and need inset compensation
- Any layout where
viewport-fit=coveris set in the meta tag
Safe content
Padded away from top and bottom insets via env(safe-area-inset-top/bottom)
Full safe area
Padding applied on all four edges — useful for full-screen overlays
List item 9
List item 9
List item 9
List item 9
List item 9
List item 9
List item 9
List item 9
On iPhone, SafeArea pushes the bar above the home indicator. On desktop it has no visual effect — the bar just sits at the bottom as normal.
API Reference
SafeArea
Related Components
- PullToRefresh — Gesture-driven data reload typically used inside a safe-area layout
- Sheet — Bottom sheet overlay that benefits from bottom safe-area insets
- Drawer — Side drawer that may require left/right safe-area on landscape phones