From 37c67d4acb77b66d31af282b0e8226ece2b1c75e Mon Sep 17 00:00:00 2001 From: k Date: Wed, 27 May 2026 16:20:47 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20stop=20page=20flashing=20=E2=80=94=20rev?= =?UTF-8?q?ert=20overflow-x:clip,=20fix=20sticky=20properly?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit overflow-x:clip on html+body caused a browser layout loop → continuous flashing. Correct fix: only set overflow-x:hidden on html (the real scroll container). Leaving body without overflow-x means body won't become a secondary scroll container, so position:sticky on the navbar works correctly without the layout loop. Co-Authored-By: Claude Sonnet 4.6 --- app/[locale]/globals.css | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/app/[locale]/globals.css b/app/[locale]/globals.css index 2f8b948..1cd2bd4 100644 --- a/app/[locale]/globals.css +++ b/app/[locale]/globals.css @@ -2762,9 +2762,11 @@ html[data-theme="dark"] .ai-reasoning-card { } /* Global safety: no page-level horizontal scroll. - Use `overflow-x: clip` (not `hidden`) — `hidden` turns body into a scroll - container, which silently breaks `position: sticky` on the navbar. */ -html, body { max-width: 100%; overflow-x: clip; } + Only set overflow-x on html (the real viewport scroll container). + Setting it on body would make body a secondary scroll container and + silently break `position: sticky` on the navbar. */ +html { max-width: 100%; overflow-x: hidden; } +body { max-width: 100%; } /* Misc utilities */ .stack { display: flex; flex-direction: column; }