A pinned bar under the notch or the home indicator

Forbidden: position: fixed; bottom: 0 on a tab bar, on a page whose viewport meta tag sets viewport-fit=cover
Instead: Pad the pinned edge with its inset — padding-bottom: env(safe-area-inset-bottom) for a bottom bar, and the matching inset for any other edge it touches.

What this rule looks like

Forbidden

Instead

Why this rule

viewport-fit=cover extends the page under the notch and the gesture bar. That is what makes an edge-to-edge design possible, and it also means a bar at bottom: 0 has its labels sitting beneath the home indicator, where a swipe meant for the tab closes the app instead. Without viewport-fit=cover, the browser keeps the page inside the safe area on its own, and there is nothing to do.

Kind: Rule
Section: Things to avoid
Group: Spacing and layout
Bucket: mechanical
Severity: warning
Detector: safe-area
Since: v0.10.0

Read as plain text