diff --git a/frontend/src/index.css b/frontend/src/index.css
index e52234d..889ecf3 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -35,19 +35,36 @@
 html {
   scrollbar-gutter: stable;
 }
+/* Chrome paints an empty gutter (page without scrollbar) plain white, ignoring the page background. There
+   the scrollbar is always shown instead: without anything to scroll it is an empty track, coloured like
+   the header and page by body::-webkit-scrollbar below. Firefox keeps the gutter, which it paints with the
+   html background. */
+@supports selector(::-webkit-scrollbar) {
+  html {
+    overflow-y: scroll;
+  }
+}
+/* Header colour down to the header's height (--app-header-h, set by App), then the page colour. The header's
+   bottom line is its own layer on top, since the theme gives it as a translucent colour. Defined on body:
+   Chrome resolves variables for the page scrollbar from there (html sees it through inheritance too). */
+:root,
+body {
+  --header-gutter-bg: linear-gradient(
+      to bottom,
+      transparent calc(var(--app-header-h, 0px) - 1px),
+      var(--border-color) calc(var(--app-header-h, 0px) - 1px),
+      var(--border-color) var(--app-header-h, 0px),
+      transparent var(--app-header-h, 0px)
+    ),
+    linear-gradient(to bottom, var(--bg-panel) var(--app-header-h, 0px), var(--bg-app) var(--app-header-h, 0px));
+}
 /* The gutter shows the page background; on the desktop it carries the header colour (and its bottom
    line) down to the header's height (--app-header-h, set by App), fixed like the sticky header, so the
    header seems to run to the window edge */
 @media (min-width: 768px) {
   html {
-    background: linear-gradient(
-        to bottom,
-        var(--bg-panel) calc(var(--app-header-h, 0px) - 1px),
-        var(--border-color) calc(var(--app-header-h, 0px) - 1px),
-        var(--border-color) var(--app-header-h, 0px),
-        var(--bg-app) var(--app-header-h, 0px)
-      )
-      fixed;
+    background: var(--header-gutter-bg);
+    background-attachment: fixed;
   }
 }
 
@@ -69,6 +86,18 @@ body {
   background: transparent;
 }
 
+/* Chrome takes the page scrollbar's style from body (html:: does not apply) and paints white behind a
+   transparent track, where Firefox shows the html background: the page scrollbar gets the same
+   background as html above, on the desktop with the header colour on top */
+body::-webkit-scrollbar {
+  background: var(--bg-app);
+}
+@media (min-width: 768px) {
+  body::-webkit-scrollbar {
+    background: var(--header-gutter-bg);
+  }
+}
+
 ::-webkit-scrollbar-thumb {
   background: var(--scrollbar-thumb);
   border-radius: var(--radius-btn);