diff --git a/src/pages/404.astro b/src/pages/404.astro index a4c72e1..0ebca24 100644 --- a/src/pages/404.astro +++ b/src/pages/404.astro @@ -59,7 +59,17 @@ const description = 'The page you requested does not exist.'; html { min-width: 320px; - background: var(--paper); + /* Longhand, matching index: background-color is the value Safari reads for its + chrome and overscroll fills, and the shorthand is how it silently vanishes. */ + background-color: var(--paper); + } + + /* Same as index: no scroll on desktop, so the bounce only exists to expose + chrome-side fills the page cannot colour. */ + @media (min-width: 721px) { + html { + overscroll-behavior: none; + } } body { @@ -67,7 +77,7 @@ const description = 'The page you requested does not exist.'; min-width: 320px; min-height: 100svh; color: var(--ink); - background: var(--paper); + background-color: var(--paper); font-family: 'Archivo', system-ui, sans-serif; -webkit-font-smoothing: antialiased; } diff --git a/src/pages/index.astro b/src/pages/index.astro index 00e7860..1fc87a5 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -153,7 +153,23 @@ const canonical = new URL('/', Astro.site); html { min-width: 320px; - background: var(--paper); + /* Longhand on purpose, here and on body: the background-color value is the one + thing Safari reads for its fills, and the shorthand form is how it silently + goes missing (background: resets background-color when edited carelessly). */ + background-color: var(--paper); + } + + /* Desktop only: the page fits the viewport there, so the rubber band is pure + decoration — and macOS Safari fills parts of that bounce from chrome-side + surfaces the page cannot colour (the render-time tint sample, the refresh + spinner well), which is where the band still leaked through after every + page-side colour was right. No bounce, no surface to mis-fill. Phones keep + the native feel: the page actually scrolls there, iOS honours body's + background-color for the gap, and none would also cost pull-to-refresh. */ + @media (min-width: 721px) { + html { + overscroll-behavior: none; + } } body {