ctao/portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: scroll jumps while typing — overflow-anchor:none on live search lists (Chrome scroll anchoring)

Browse Source
This commit is contained in:
ctao
2026-07-25 18:50:54 +02:00
parent affa3262ef
commit 61f5d8444f
1 changed files with 4 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/global.css
+4
View File
@@ -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 */ max-height: min(60vh, 480px); overflow: auto; /* long lists scroll on mobile */
} }
.suggest:empty { display: none; } .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 { 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 + li { margin-top: 2px; } /* rows breathe — hover fills read as discrete items */
.suggest li:hover, .suggest li:focus-within { background: var(--moon); } .suggest li:hover, .suggest li:focus-within { background: var(--moon); }