Anchor ambient visualizer to viewport bottom; occlude via z-index not clip

Drop the --player-height bottom inset so the fixed visualizer fills the
viewport; the inset player bar no longer leaves a page-background gap. The
spacer now occludes via opaque page-surface + z-index. Visualizer no longer
reads --player-height, so spacer.ts coalescing is removed.
This commit is contained in:
daniel-c-harvey
2026-06-24 09:06:45 -04:00
parent 1e063d95f4
commit cb899a2913
4 changed files with 31 additions and 82 deletions
@@ -1,19 +1,20 @@
/* Full-viewport fixed backdrop. Sits behind the detail content (.mix-detail-foreground is z-index:1)
and never intercepts pointer events — except the zoom slider, which re-enables them on itself.
Footer clip (Phase 10 W1, spec §2c): the backdrop must stop cleanly ABOVE the audio player bar so
no lava/waveform pixel paints over or under it. `overflow: hidden` clips the canvas to this box, and
`bottom` is inset by `--player-height`, which AudioPlayerBar publishes on :root via its ResizeObserver
(Interop/layout/spacer.ts). The observer now points at whichever element is live:
expanded → the full player dock (tracks breakpoint reflow + error-banner growth)
minimized → the minimized-dock FAB container (~5660 px)
so --player-height is always non-zero while the player is mounted and the clip line follows the bar in
BOTH states (fix §1 / p10-reframe-w1-fix). The 0px fallback keeps the backdrop full-height on any
page that does not host the player. */
Anchored to the viewport bottom (`inset: 0` — fills the whole screen). The chrome that must occlude
it paints OVER it on z-index, not by clipping the box: the app bar (z 100), the docked player bar
(z 1200/1300), the site footer (z 1 stacking context), and the layout spacer (z 1 stacking context,
`--deepdrft-page-surface` background) all sit above this z-0 layer. Where those elements are inset
from the screen edges or scrolled below the fold, the visualizer fills the gap continuously — no
page-background strip around the inset player bar. `overflow: hidden` clips the canvas to this box.
NOTE: this box is decoupled from `--player-height` (it no longer reads that var). The renderer's own
ResizeObserver therefore never fires on a player-bar height change, so an eased Theater-Mode collapse
can no longer clear the GL backing store mid-ease (the former theater-flash source). See
Interop/layout/spacer.ts. */
.mix-waveform-bg {
position: fixed;
inset: 0;
bottom: var(--player-height, 0px);
z-index: 0;
pointer-events: none;
overflow: hidden;