From 3e013d7b729a25dba3fb9031134aec87f0f51178 Mon Sep 17 00:00:00 2001 From: Michael Assraf Date: Sun, 19 Jul 2026 02:23:12 +0200 Subject: [PATCH] fix(header): drop no-op backdrop-blur that flickered content on scroll [preview:none] The sticky header carried `backdrop-blur-sm`, but every platform ships an opaque header background (bg-ods-bg / bg-ods-card), so the blur sampled a backdrop that is then fully painted over: zero visual effect, but it forced the browser to keep a backdrop-filter surface and re-rasterize the strip behind the sticky bar every scroll frame. That surface desyncs a frame against the scrolling content, making content flicker as it passes under the header (most visible on large high-contrast headings, e.g. /pricing). Removing it is a visual no-op on every platform and eliminates the flicker. Co-Authored-By: Claude Opus 4.8 --- .../src/components/navigation/header.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/openframe-frontend-core/src/components/navigation/header.tsx b/openframe-frontend-core/src/components/navigation/header.tsx index a8f314885..934f3a8dd 100644 --- a/openframe-frontend-core/src/components/navigation/header.tsx +++ b/openframe-frontend-core/src/components/navigation/header.tsx @@ -277,7 +277,18 @@ export function Header({ config, platform }: HeaderProps) { // 72px = unified-header spec height (Figma 4033-90260); the right // cluster self-stretches so the Mingo launcher can sit flush. "w-full h-[72px] flex items-center justify-between", - "border-b border-ods-border backdrop-blur-sm", + // NOTE: no `backdrop-blur` here. Every platform ships an OPAQUE + // header background (`backgroundColor` below resolves to an opaque + // ODS token — bg-ods-bg / bg-ods-card), so a backdrop-filter would + // blur a backdrop that is then fully painted over: zero visual + // effect, but it still forces the browser to keep a backdrop-filter + // surface and re-rasterize the strip behind this sticky bar every + // scroll frame. That surface desyncs a frame against the scrolling + // content and makes content flicker as it passes under the header + // (most visible on large high-contrast headings, e.g. /pricing). + // If a consumer ever wants a translucent "glass" header, add the + // blur together with a translucent `backgroundColor` deliberately. + "border-b border-ods-border", "pl-6", !config.mingo?.enabled && "pr-6", // Background color (configurable via backgroundColor prop)