peter/siftlode
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(ui): snap scaled root font-size to a whole pixel

Browse Source 
The root font-size was calc(16px * var(--font-scale)); a non-integer scale
(1.02 -> 16.32px) made every rem-derived box height fractional. When a filter
section's visible row count changes on a facet refetch, its fractional height
shifts everything below it by the sub-pixel remainder — a deterministic ~0.5px
CSS move that snaps to a visible 1px jitter of the whole filter rail at DPR=1.

round(calc(16px * var(--font-scale)), 1px) keeps the font-scale feature but
quantises the root to an integer pixel, so metrics land on integers and the
sub-pixel reflow jitter is gone app-wide. Verified: root 16.32->16px, chip row
26.453->26px, build + Lightning CSS pass round() through intact.
This commit is contained in:
peter
2026-08-15 00:07:25 +02:00
parent 61e848e63a
commit 61ee7af9e4
1 changed files with 5 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/index.css
+5 -1
View File
@@ -288,7 +288,11 @@ html[data-theme="light"] {
} }
html { html {
font-size: calc(16px * var(--font-scale)); /* Snap the scaled root font-size to a whole pixel. The base is rem-derived app-wide, so a fractional
root (e.g. 16px * 1.02 = 16.32px) makes every box height fractional — and when a reflow changes a
section's row count, the sub-pixel remainder shifts everything below it by ~0.5px, a visible 1px
jitter at DPR=1. round() keeps the font-scale feature but quantises to crisp integer metrics. */
font-size: round(calc(16px * var(--font-scale)), 1px);
background: var(--bg); background: var(--bg);
} }