HTML Background
The page behind your page has a color too.
Scroll past the top of a page in Safari and the content rubber-bands,
revealing whatever is behind it. If your dark app only sets its background
on a wrapper div — or even on body in some configurations — that reveal is
a flash of white.
html background set
This dark page only styles its content. Overscroll it — without a background on html, Safari flashes white behind it.
The fix
Set the background on the root element itself:
html {
background-color: var(--background);
}
The browser paints the overscroll area (and the area behind
env(safe-area-inset) notches) with the html background. A wrapper div
scrolls away with the content; html doesn't.
Related edges
- Theme color.
<meta name="theme-color">tints Safari's toolbar to match — update it when the theme switches. - Overscroll containment.
overscroll-behavior: nonestops scroll chaining into the rubber-band for full-screen app UIs, but think twice: the bounce is a platform affordance users feel at home with. - Both modes. If you support light and dark, the
htmlbackground must follow the active theme, or the flash returns in one of them.
Resources
HTML vs Body in CSS | CSS-Tricks — The difference between and is easy to overlook. It seems to be one of those things that falls into the category of trivial. Admittedly, I have a bad habit of
overscroll-behavior CSS property - CSS | MDN — The overscroll-behavior CSS property sets what a browser does when reaching the boundary of a scrolling area.