Backgrounds may paint past the safe area; content may not

What it is

If a chat list’s fill stops above the home indicator, a black strip appears, as if the app were unfinished. If a map and its Navigate button both run to the physical bottom, the button enters the gesture band. The split: paint ground to the glass, park type and controls in the safe-area inner frame. The safe area is a content inset, not a letterbox around the whole viewport.

This leaf is only that split. Corner clipping and whether the indicator band is tappable are already billed elsewhere.

Why it happens

Modern phones expect the panel to be the device; black rims read as leftover. Backgrounds (app-bar colour, list fill, hero, map) do not need to be readable in occluded pixels, so they can and should paint under the notch and indicator, avoiding a letterbox. Type and controls need whole pixels and hittable targets, so they stop at the inset. viewport-fit=cover stops the browser adding a letterbox for you; skip the matching env() inset and content runs into the clipped region.

Inset the whole page and ground retreats with content: dated black bars. Bleed the whole page and content rides with ground: clipping and mis-taps. Two layers, one coordinate system.

Where it stops holding

A player that hides all chrome for immersion may bleed both layers until a tap brings controls back into the frame. On desktop and square-corner devices the two layers coincide and the split is invisible. Screenshot and recording pipelines sometimes crop bled ground; that is the export pipe, not runtime layout.

Landscape and unfolded foldables recompute both edges; do not set the split once in portrait and freeze it.

Applying it

• Ground (fill, image, map) covers the physical viewport; the content layer uses safe-area padding or the equivalent inset. On the web, viewport-fit=cover plus env() insets.
• App bar and toolbar fills extend into the unsafe region; titles and buttons on them stay inside the safe area.
• How to check: look behind the notch and the indicator for the app’s own colour or image, not a black or white bar. Then confirm no type and no button enters those two regions. Two failure modes: letterbox (ground did not extend) and content bleed (what should inset did not). Recheck in landscape and with the keyboard up; the keyboard changes the bottom inset.

Related

• Same group: F2.12.1 Notch and corner radius clip what you park in the corners · F2.12.2 Do not put tappables in the home-indicator band
• Nearby: F1.12 Fixed chrome and safe area · F2.02 Columns, gutters and margins · F2.13 Portrait and landscape
• Search terms: viewport-fit=cover · env(safe-area-inset-*) · edge-to-edge · letterboxing