Where does Safari stop drawing?
Open this page on an iPhone. The stripes are a ruler in CSS pixels, and the magenta is
body. Wherever you see magenta, Safari is painting body instead of the page.
- Screen
- …
- Window
- …
- 100svh
- …
- 100dvh
- …
- 100lvh
- …
- 100vh
- …
- Safe-area insets
- …
Measuring…
Swipe up to collapse the toolbar, rotate, or switch the tab layout in Settings › Apps › Safari. The numbers follow.
Reading the bottom edge
- Stripes to the screen's last row: Safari draws the page under its toolbar. How far below the window it reaches depends on the tab layout, not the phone.
- A flat magenta band with
the stripes cut off above it: you are seeing
body. Here that only happens past the end of the page. On your own site, a fixed or sticky element sized to the viewport causes it on every screen. - Magenta behind the clock:
nothing on this page spans the top edge, so Safari falls back to
body's color. An element at least 90% of the width, touching the top, would claim it instead.
The page ends just below
Pull past the last stripe and the rubber band shows body: magenta. Safari reads
body's color live for the strip under the toolbar, and for the status bar too —
it keeps sampling after load, so a color change moves both within a couple of seconds.
These rules, their fixes and a way to verify each one in the iOS simulator are written up
as an agent skill: iOS Safari Gotchas.
The color probes are the test pages behind its theme-color and
status-bar findings.