gabriel / musehub public
investigate-zoom-removal.md markdown
44 lines 2.2 KB
Raw
sha256:72e1e8b3f16d4f6032eb8a51c999e8fdaa38a897e7d4e9516ba1a9948f36b7e1 docs: track issue #136 (zoom removal) and #137 (heading anc… Sonnet 5 13 days ago

Summary

body { zoom: 1.25; } (src/scss/_layout.scss, confirmed live since at least 2026-04-11, likely earlier — muse blame couldn't reliably date it due to a separate false-attribution bug filed as muse#84 in the muse repo) is the root cause of a class of layout bugs where position: sticky and 100dvh-based height calculations misbehave. zoom is a non-standard CSS property (WebKit/Chromium-originated) that rescales the entire layout box model including viewport-unit math and sticky offset calculations, in ways that are inconsistent across engines.

musehub#84 / the two-column-scroll-layout fix worked around this by avoiding position: sticky entirely (bounded-height flex/grid with independent overflow-y: auto per column instead) — but zoom itself is still present and will keep causing friction for any future layout work that assumes standard viewport-relative math.

Why not fixed now

Removing zoom outright and replacing it with rem-based font scaling (the standard equivalent) is blocked: the design system's spacing tokens (--space-*) are currently defined in px, not rem. Without zoom, px-based spacing wouldn't scale with the intended 1.25x zoom effect, so removing zoom requires first converting spacing tokens to rem — a broader design-token refactor, not a drop-in swap.

Proposed investigation

  1. Audit --space-* and any other px-based design tokens for feasibility of a rem conversion.
  2. Prototype removing body { zoom: 1.25 } in favor of html { font-size: 125% } (or equivalent) once tokens are rem-based.
  3. Re-test all pages that use position: sticky (if any remain) and any dvh/vh viewport-unit calculations for correctness once zoom is gone.
  4. Decide whether the bounded-height/independent-scroll pattern introduced in musehub#84 should be kept regardless (it's the more idiomatic, cross-browser pattern for independently-scrolling columns even without zoom in the picture).

Impact

Not urgent — the concrete symptom (broken two-column scroll) is already fixed. This is forward-looking: zoom remains a landmine for any future CSS relying on standard viewport-unit or sticky-positioning math.

File History 1 commit
sha256:72e1e8b3f16d4f6032eb8a51c999e8fdaa38a897e7d4e9516ba1a9948f36b7e1 docs: track issue #136 (zoom removal) and #137 (heading anc… Sonnet 5 13 days ago