training/dashboard: stage-view opacity-transition removal is the fix

Confirmed by user that snapping scenes in/out instead of opacity-
transitioning fixed the grid-shape artifact that had been appearing
over metric content during scene changes.

Root cause: while stage-view's opacity animated between 0 and 1
(over 600ms), the compositor was rendering stage-view to its own
intermediate bitmap and sampling whatever was painted underneath
— including the bg-canvas's animated perspective grid. That
sampled grid leaked into the metric content area for the duration
of the transition. Removing the transition removes the compositor
work entirely; scenes change with a snap, no resampling.

Trade-off accepted: no fade between scenes. If a smoother
transition is wanted later, options that DON'T trigger the same
sampling are clip-path wipes, transform-based slides, or animating
opacity at <100ms (short enough that the sampled bitmap doesn't
have time to register visually).
This commit is contained in:
Max Gorog 2026-05-08 00:19:59 -05:00
parent 1fd2adf376
commit 91a3aceb68
2 changed files with 10 additions and 7 deletions

View file

@ -441,12 +441,15 @@ html, body { overflow-anchor: none; }
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: flex-start;
padding-right: clamp(0px, calc(var(--prose-w) - 1.5em), 40em);
/* DIAGNOSTIC: opacity transition removed. Snap between
active/inactive scenes instantly. If the grid-shape artifact
over metric content disappears, the transition was causing
compositor work that produced it (cached bitmap with stale
bg sampling, or layer-promotion-mid-transition). If it
persists, transitions weren't the cause and we look elsewhere. */
/* No opacity transition: snapping scenes in/out instantly. The
transition was the source of the grid-shape artifact that
appeared over metric content during scene changes. While
stage-view's opacity was animating between 0 and 1, the
compositor sampled the perspective floor (bg-canvas's animated
grid) into the stage-view's intermediate bitmap, and the
grid pattern leaked into the metric content area for the
duration of the transition. Removing the transition removes
that compositor work entirely. */
opacity: 0;
pointer-events: none;
}

View file

@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CIS490 — live</title>
<link rel="stylesheet" href="/static/dashboard.css?v=f5d8a564">
<link rel="stylesheet" href="/static/dashboard.css?v=d9edbe11">
</head>
<body>
<!-- SVG filter defs for the lava-lamp goo effect. Width/height 0