From 63602a2f47397e2212187ab74264bf63b5a0d717 Mon Sep 17 00:00:00 2001
From: Florent Tapponnier <florent.tapponnier@gmail.com>
Date: Tue, 2 Jun 2026 14:12:38 +0200
Subject: [PATCH] fix: switch header to position: sticky (iOS 26 WebKit fixed
 jitter bug)

Web search confirmed user is not alone. WebKit bug 297779 reports that
on iOS 26 Safari + WKWebView (Telegram in-app browser, Chrome iOS), any
position: fixed element drifts 10-24 px when scroll direction reverses,
exposing the page under the header through a thin gap. Mastodon and
LinkedIn ship the same symptom. Apple acknowledged the bug, partially
fixed it in iOS 26.1 but residual reports persist into Dec 2025.

position: sticky uses a different render path in WebKit that does not
trip the jitter heuristic. It is also simpler:
- no spacer div needed (the element stays in normal flow)
- no useRef + ResizeObserver to keep the spacer in sync
- no headerH state

Net: -25 lines on top of fixing the cosmetic gap. Desktop and standalone
Safari behavior are identical, sticky just renders more reliably in
WebViews.

Refs:
- https://bugs.webkit.org/show_bug.cgi?id=297779
- https://github.com/mastodon/mastodon/issues/36144
- https://github.com/TelegramMessenger/Telegram-iOS/issues/1748
---
 src/components/site-header.tsx | 43 +++++++++-------------------------
 1 file changed, 11 insertions(+), 32 deletions(-)

diff --git a/src/components/site-header.tsx b/src/components/site-header.tsx
index df56a851..138e641a 100644
--- a/src/components/site-header.tsx
+++ b/src/components/site-header.tsx
@@ -2,7 +2,7 @@
 
 import { Menu, X } from "lucide-react";
 import Link from "next/link";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { SiteLogoSwitcher } from "@/components/site-logo-switcher";
 import { ThemeToggle } from "@/components/theme-toggle";
 
@@ -24,10 +24,6 @@ const NAV = [
 
 export function SiteHeader() {
   const [open, setOpen] = useState(false);
-  const headerRef = useRef<HTMLDivElement>(null);
-  // Initial estimate matches the rendered header height so the spacer
-  // doesn't jump on first paint; ResizeObserver refines it after mount.
-  const [headerH, setHeaderH] = useState(64);
 
   // Close the mobile menu when the viewport crosses md so the dropdown
   // doesn't stick around as the desktop nav reappears.
@@ -41,29 +37,16 @@ export function SiteHeader() {
     return () => mql.removeEventListener("change", onChange);
   }, [open]);
 
-  // Measure the fixed header so we can reserve the same height in the
-  // flow with a spacer. ResizeObserver picks up viewport resizes.
-  useEffect(() => {
-    const el = headerRef.current;
-    if (!el) return;
-    const update = () => setHeaderH(el.offsetHeight);
-    update();
-    const ro = new ResizeObserver(update);
-    ro.observe(el);
-    return () => ro.disconnect();
-  }, []);
-
   return (
-    <>
-      <div
-        ref={headerRef}
-        // position: fixed (not sticky) — sticky is flaky on iOS Safari when
-        // the URL bar animates; fixed keeps the navbar glued. No ancestor
-        // may carry overflow: clip / transform / will-change or fixed
-        // positions relative to that ancestor instead of the viewport
-        // (Telegram WKWebView gap symptom). Verified clean as of dev.
-        className="fixed top-0 left-0 right-0 z-50 flex flex-col font-sans bg-surface"
-      >
+    <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"
+    >
       <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">
           <div className="flex items-center gap-2">
@@ -148,10 +131,6 @@ export function SiteHeader() {
           </nav>
         )}
       </header>
-      </div>
-      {/* Spacer reserves the fixed header's height in the document flow
-          so page content does not start under it. */}
-      <div aria-hidden style={{ height: headerH }} />
-    </>
+    </div>
   );
 }