env() safe areas

Keeps the bar and Now Playing clear of the notch and the home indicator.

A post with its tracks listed, and the player bar along the bottom of the screen — The player bar, padded so its controls clear the home indicator.

How Riff uses it

The two insets are read once into custom properties. The fixed bar grows by the bottom inset and pads its controls above it. Now Playing, which covers the whole screen, pads its header below the notch and its controls above the indicator. The toast and the spacer at the end of the page use the same value.

Why

A fixed bar on a phone with a home indicator would otherwise put the play button under the indicator.

Without it

The second argument gives 0px, so the bar is exactly its base height.

Where

plugins/riff/assets/riff.css, line 20

--riff-safe-b: env(safe-area-inset-bottom, 0px);

plugins/riff/assets/riff.css, line 523

height: calc(var(--riff-bar-h) + var(--riff-safe-b));

Links open the source at the commit this page was published from.

Reference: env() safe areas on MDN.