diff --git a/index.html b/index.html
index 4fc8c0b..637ec4b 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
   <title>devpage</title>
   <!-- mobile browser UI theming -->
   <meta name="theme-color" id="themeColorMeta" content="#4d22b3">
-  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <meta name="apple-mobile-web-app-status-bar-style" content="#4d22b3">
 
   <!-- Fonts -->
   <link rel="preconnect" href="https://fonts.googleapis.com" />
diff --git a/src/styles/gradient.css b/src/styles/gradient.css
index 61331e9..f7fac4e 100644
--- a/src/styles/gradient.css
+++ b/src/styles/gradient.css
@@ -29,7 +29,10 @@
 }
 
 /* ── Background application ──────────────────────────────── */
-body {
+html, body {
+  /* apply the gradient to the root element as well so the
+     translucent iOS bars always show a matching colour even
+     when the page hasn't been scrolled */
   background: linear-gradient(
     var(--gradient-angle),
     var(--color-1)  0%,