From 08942ef5f45b19731f8c7b9dac70da86f16bc3ce Mon Sep 17 00:00:00 2001
From: Florent Tapponnier <florent.tapponnier@gmail.com>
Date: Tue, 2 Jun 2026 14:43:41 +0200
Subject: [PATCH] fix: drop sticky on mobile (iOS 26 WebKit jitter workaround)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

position: sticky and position: fixed both jitter 10-24 px on iOS 26 when
scroll direction changes (bugs.webkit.org/297779). Apple acknowledged
the bug, partial fix in 26.1, residual reports into late 2025. Mastodon
and LinkedIn ship the same symptom and concluded it is unfixable from
the site side.

Mitigation: keep sticky only on md+ where the desktop render path is
clean. On mobile the header stays in normal flow, scrolls away with the
page, and the jitter cannot appear because nothing is positioned. Same
pattern as most mobile sites — pull to top to see the nav.

Single class change: `sticky top-0` -> `relative md:sticky md:top-0`.
---
 src/components/site-header.tsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/site-header.tsx b/src/components/site-header.tsx
index 138e641a..153c9d3d 100644
--- a/src/components/site-header.tsx
+++ b/src/components/site-header.tsx
@@ -39,13 +39,16 @@ export function SiteHeader() {
 
   return (
     <div
-      // position: sticky (not fixed) — WebKit iOS 26 has a known bug where
-      // position: fixed elements jitter 10-24 px on scroll direction change
-      // (bugs.webkit.org/297779). The bug affects Safari, Chrome AND every
-      // WKWebView host (Telegram in-app browser is the symptom we hit).
-      // sticky uses a different render path that doesn't trip the bug, and
-      // since it stays in normal flow there's no spacer div to keep in sync.
-      className="sticky top-0 z-50 flex flex-col font-sans bg-surface"
+      // Sticky only on md+ (desktop). On mobile the header stays in normal
+      // flow and scrolls away with the page. Reason: WebKit iOS 26 has a
+      // regression (bugs.webkit.org/297779) where sticky AND fixed elements
+      // jitter 10-24 px on scroll direction change, leaving a visible gap
+      // at the top in every WKWebView host (Telegram in-app, Chrome iOS,
+      // Mastodon and LinkedIn ship the same symptom). Apple's fix is
+      // partial; until iOS 26.2+ lands across the user base, non-sticky on
+      // mobile is the only way to avoid the jitter entirely. Standard
+      // mobile UX anyway — pull to top to see the nav.
+      className="relative md:sticky md:top-0 z-50 flex flex-col font-sans bg-surface"
     >
       <header className="border-b border-rule py-4 md:py-5 px-4 sm:px-6 shrink-0 text-sm bg-surface relative">
         <div className="max-w-[1400px] mx-auto flex items-center justify-between gap-3">