From 694b7d20032611c8b8f8e1d0cf798c01e3969d52 Mon Sep 17 00:00:00 2001 From: ctao Date: Sat, 25 Jul 2026 18:59:57 +0200 Subject: [PATCH] =?UTF-8?q?fix:=20page=20jumped=20to=20top=20while=20typin?= =?UTF-8?q?g=20in=20header=20search=20=E2=80=94=20caret-visibility=20scrol?= =?UTF-8?q?ling=20honours=20scroll-padding-top;=20negative=20scroll-margin?= =?UTF-8?q?=20on=20header=20inputs=20cancels=20it=20(suggestions=20re-enab?= =?UTF-8?q?led)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/global.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/styles/global.css b/src/styles/global.css index 544bf0d..4e67e4a 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -108,6 +108,13 @@ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; /* sticky header + anchor jumps */ } +/* Chrome re-scrolls the focused editable into view on EVERY keystroke and + honours scroll-padding-top while doing it. Inputs inside the sticky header + live above that 76px line by definition, so each typed character triggered + a corrective scroll-to-top. Negative scroll-margin cancels the padding for + exactly these fields (root cause, not a workaround — the padding exists for + in-content anchors, never for header chrome). */ +.nav-search input, .search-pop input { scroll-margin-top: -76px; } /* Guard, not a solution (DESIGN.md): every wide element is contained at its own level (tables scroll in their box, long words wrap); clip only catches regressions so one offender can never remove the page gutters. `clip`, unlike