Skip to content

fix: header non-sticky on mobile (iOS 26 jitter workaround) #267

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Flotapponnier merged 1 commit into from
Jun 2, 2026
Merged

fix: header non-sticky on mobile (iOS 26 jitter workaround) #267

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 10 additions & 7 deletions src/components/site-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
Loading