From de2c992fa56353daff38deccf0509b8961c7d486 Mon Sep 17 00:00:00 2001
From: Terencio Agozzino <terencio.agozzino@gmail.com>
Date: Fri, 6 Nov 2026 21:34:31 +0100
Subject: [PATCH] fix: tint Safari 26's bottom bar with the footer's colour

Safari 26 ignores theme-color and the root background for its bars; it
reads a fixed element touching the edge. A strip at the bottom edge, in the
footer's colour and shown only while the footer is on screen, gives it
that colour without ever being seen.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/layouts/Base.astro |  1 +
 src/styles/global.css  | 18 ++++++++++++++++++
 tests/site.spec.ts     |  8 ++++++++
 3 files changed, 27 insertions(+)

diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index 9626d1e..bd6fb6e 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -150,6 +150,7 @@ const jsonLd = {
   </head>
   <body>
     <slot />
+    <div class="edge" aria-hidden="true"></div>
     <script>
       // Reveal each block once, as it enters the viewport.
       const observer = new IntersectionObserver(
diff --git a/src/styles/global.css b/src/styles/global.css
index 600fc47..458084e 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -117,6 +117,24 @@ html.at-end {
   background: var(--closing);
 }
 
+/* Safari 26 on iPhone ignores both for its bottom bar: it takes the colour of
+   a fixed element touching the bottom edge. Shown only once the footer is on
+   screen, this strip lies over the footer, in its colour, so it never shows
+   itself; it only gives Safari the footer's green. */
+.edge {
+  display: none;
+  position: fixed;
+  inset-inline: 0;
+  bottom: -8px;
+  height: 12px;
+  background: var(--closing);
+  pointer-events: none;
+}
+
+html.at-end .edge {
+  display: block;
+}
+
 body {
   font-family: var(--font-body);
   color: var(--text);
diff --git a/tests/site.spec.ts b/tests/site.spec.ts
index 6229ca8b..7b8aa3a 100644
--- a/tests/site.spec.ts
+++ b/tests/site.spec.ts
@@ -251,6 +251,14 @@ test("paints past the page's edges in the theme's colour, then the footer's", as
   await page.locator('footer').scrollIntoViewIfNeeded();
   await expect(html).toHaveClass(/at-end/);
   await expect(html).toHaveCSS('background-color', await background('footer'));
+
+  // And Safari 26, which reads a fixed element at the bottom edge instead, finds
+  // one in the footer's colour there, and only there.
+  const edge = page.locator('.edge');
+  await expect(edge).toHaveCSS('background-color', await background('footer'));
+  await expect(edge).toHaveCSS('position', 'fixed');
+  await page.locator('#top').scrollIntoViewIfNeeded();
+  await expect(edge).toBeHidden();
 });
 
 test('counts the visit, and the CV, the thesis, an email and a link out', async ({ page }) => {