The system occupies gestures and the safe area
Aliases: safe area · system gestures · home indicator · edge gesture
What it is
Apple carves the screen so that some of it is never the app’s primary interactive field. The safe area is the rectangle left after the system has taken the status bar, the corner radii, and the home indicator. At the same time, swipes on the leading, trailing, and bottom edges are reserved for back, Home, Control Center, and Notification Center. An app may paint background into the unsafe strips; it may not park a control that must be hit, or a gesture that must be recognized, inside those occupied bands. The occupation is a prior claim by the system, not a margin suggested for visual comfort.
The question is who has already booked the physical edge, not whether content should overlap chrome. A primary action in the home-indicator strip, a horizontal pager on the leading edge, or an upward sheet from the bottom lip all compete for the same trajectory the system already lives on.
Why it happens
The safe area is subtraction: pixels the system chrome is using are removed, and layout is supposed to honor what remains. Corner radii clip hit targets that sit flush to the edge; the home indicator swallows the lower half of a button that sits flush to the bottom—not merely “looking covered,” but failing hit-testing because the touch landed on a system view. Edge gestures are first-come: the system keeps a recognition band inside the edge, and once direction and distance match a system gesture, the event is not delivered to the app. A custom swipe registered on the same band succeeds only when the system happens not to claim it. That is not a stable interaction.
“Flush to the edge” is therefore not a neutral compositional choice on Apple platforms. Flush means walking into ground the system already holds. Safe-area insets change with orientation, Split View, and whether chrome is hidden; a layout that hard-codes one notch geometry will misplace the occupation boundary on the next device or the next rotation.
Where it stops holding
Fullscreen media, camera finders, and games may hide chrome and draw to the edge, but the gesture that leaves fullscreen still belongs to the system—do not add a same-direction “collapse toolbar” on the bottom lip. Split View, Stage Manager, and external displays reshape the safe area; a constant copied from a phone’s bottom inset will not travel. Pencil and trackpad input do not use the finger edge-gesture band, but the safe area remains a layout contract—type and buttons still cannot hide in the corners. Letting scroll bounce extend into the unsafe region is allowed; pinning a Submit button there is not. Web content that hugs CSS pixels without reading safe-area insets repeats the same occupation conflict on the notch and the indicator.
Applying it
- Constrain layout to the safe area, not to the full screen or to one generation’s notch constants. Re-read insets in landscape and in Split View.
- Keep primary buttons, page indicators, and custom horizontal swipes inside the safe area, and leave the recognition band to the system. Do not put a pager on the leading edge in the same direction as back.
- Immersive fullscreen may paint to the edge, but must preserve the system exit gesture and restore safe-area constraints when chrome returns.
- Verify on a device: trigger system back, Home, and Control Center from the edges while trying to hit a flush primary button. A miss, or a swipe that sometimes pages and sometimes leaves the app, means the interaction sits on occupied ground. Repeat at the largest text size and in landscape to confirm enlarged buttons have not been pushed into the indicator.