From 61f5d8444f368e96cdeff632f95940b48fd6e24a Mon Sep 17 00:00:00 2001 From: ctao Date: Sat, 25 Jul 2026 18:50:54 +0200 Subject: [PATCH] =?UTF-8?q?fix:=20scroll=20jumps=20while=20typing=20?= =?UTF-8?q?=E2=80=94=20overflow-anchor:none=20on=20live=20search=20lists?= =?UTF-8?q?=20(Chrome=20scroll=20anchoring)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/global.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/styles/global.css b/src/styles/global.css index b26189a..544bf0d 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -355,6 +355,10 @@ a.btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: no max-height: min(60vh, 480px); overflow: auto; /* long lists scroll on mobile */ } .suggest:empty { display: none; } +/* Live-updating lists must never become the browser's scroll anchor — + Chrome otherwise "compensates" each keystroke's DOM swap with a scroll + adjustment (the page visibly jumps while typing). */ +.suggest, .search-results, #search-status { overflow-anchor: none; } .suggest li { display: flex; align-items: flex-start; gap: var(--space-s); padding: 0 12px; border-radius: calc(var(--radius) - 8px); } .suggest li + li { margin-top: 2px; } /* rows breathe — hover fills read as discrete items */ .suggest li:hover, .suggest li:focus-within { background: var(--moon); }