bolyai/CIS490
3
0
Fork 0
Code Issues 5 Pull requests Projects 1 Releases Packages Wiki Activity Actions

training/dashboard: diagnostic — remove stage-view opacity transition

Browse source
This commit is contained in:
Max Gorog 2026-05-08 00:18:48 -05:00
parent d99a8861f3
commit 1fd2adf376
2 changed files with 8 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
training/dashboard/static/dashboard.css
View file

@ -440,23 +440,15 @@ html, body { overflow-anchor: none; }
.stage-view {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: flex-start;
/* Reserve right-side space for prose, with a small horizontal gap
so the canvas content doesn't crowd the prose column's left
edge. The clamp keeps it sane on narrow viewports and unbounded
ones. */
padding-right: clamp(0px, calc(var(--prose-w) - 1.5em), 40em);
opacity: 0; transition: opacity var(--scene-fade-ms) ease;
/* 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. */
opacity: 0;
pointer-events: none;
/* Pre-promote each stage-view to its own compositor layer before
the opacity transition fires. Without this hint, Chromium
promotes the layer mid-transition (when opacity changes from
exactly 0 to a non-zero value) and briefly samples a stale
snapshot of whatever was painted there — typically the bg-grid
behind, which then appears as a phantom grid pattern over the
metric content for the duration of the transition. Promoting
up front means the transition is a pure compositor-side
interpolation with no resampling. */
will-change: opacity;
}
.stage-view[data-active] { opacity: 1; pointer-events: auto; }

2
training/dashboard/static/index.html
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=c8cee835">
<link rel="stylesheet" href="/static/dashboard.css?v=f5d8a564">
</head>
<body>
<!-- SVG filter defs for the lava-lamp goo effect. Width/height 0