fix(web): phone pane transition leaves no backdrop roots; idle warming order (train #1026)

kayg commented

2026-11-09 13:37:02 +00:00

Owner

Fixes the real regressions train #1026 found on dev 4906cdb11 (from #1014, phone pane-to-pane transitions). Refs #1026.

Causes and fixes

glass.spec.ts:76 (article.page.see-through in div.live.in: filter, div.float-glass..under in div.dock: opacity 0): .live and .plain rested at filter: blur(0), and the hidden list dock rested at opacity: 0; both are backdrop roots over glass. The resting filter is gone (the crossfade keyframes still animate it, and end). The hidden dock now rests below the window (bottom: -300px, as before) with no opacity; its pop fade-in is a keyframe dock-in that ends (flagged by a class set from the lazy card chunk, so the first-screen script does not grow).
preload.spec.ts:89 + 4. lazy-offline.spec.ts:3: the phone note card (swipe-back chunk, asked for as soon as the stack is up) imported paperOf from lib/page-colour, which the splitter had placed in idle-screens, so the card fetched all of idle-screens before idle. The card now takes its colour from the editor's CSS (:is(.page, .pv)[data-paper=…] in editor.css): no import, no new chunk, no duplicated hues.
lazy-ui.spec.ts:70 (SecurityError on cssRules): was a knock-on of the early idle-screens fetch (gone with 2). The spec's stylesheet reads also now skip a sheet that cannot be read.

Specs that pinned the old resting opacity (pane-transition, phone-foot) now check "below the window, no opacity"; the card-paper check reads data-paper.

Bisect: not needed; causes read from the #1014/pickers diff and confirmed by the specs.

Gates (dev-01, head of this PR)

The four specs, --repeat-each=5, chromium-390 + webkit-390: 75 passed, 0 failed.
Broad set (glass glass-roots lazy preload pane-transition phone swipe picker-lazy tasks-lazy), --workers=1:
- chromium-390: 496 passed, 3 failed, 10 skipped. swipe-guard.spec.ts:112 and swipe-rows.spec.ts:437 fail the same on plain dev (3/3 on base, same binary), so not from this PR. phone-bars.spec.ts:113 "all, sky light dawn" failed once on first run, passes alone on this branch and on base (3 reruns each).
- webkit-390: 495 passed, 2 failed (the same two swipe specs, which fail on dev in chromium; not rerun on dev in WebKit).
- chromium-1440: 80 passed, 0 failed. webkit-1440: 79 passed, 0 failed.
perf/web.sh --bundle-only --gate: exit 0. first_js_brotli 221.685 KB (dev budget 222.01, first-screen budget 240), first_css_brotli 17.746 KB, total_js_brotli 496.261 KB (budget 506.34); no new chunk, no budget file change.
Not run: svelte-check, vitest (this PR changes no types or logic outside two small Svelte/CSS edits).

Frames (Mac VM, WebKit 390, 4 runs each, push + pop, light + dark)

The Mac VM is 60 Hz with a noisy floor (p50 17 ms; frames of 70 to 120 ms appear in both variants). Base and after are equal within that noise: base p95 24 to 76 ms, max 79 to 120; after p95 26 to 43, max 68 to 117; frames over 16.7 ms: base 36 to 43, after 34 to 47 of about 65. The 120 Hz budget (p95 <= 8.3 ms) cannot be judged on this VM; it needs a real 120 Hz device. Nothing in the motion changed: same transitions on translate/opacity of the screens; only the resting values of the dock and wrapper changed.

Before/after shots (light/dark, push mid-slide and pop) are in the comment below.

🤖 Generated with Claude Code

Fixes the real regressions train #1026 found on dev 4906cdb11 (from #1014, phone pane-to-pane transitions). Refs #1026. ## Causes and fixes 1. **glass.spec.ts:76** (`article.page.see-through in div.live.in: filter`, `div.float-glass..under in div.dock: opacity 0`): `.live` and `.plain` rested at `filter: blur(0)`, and the hidden list dock rested at `opacity: 0`; both are backdrop roots over glass. The resting `filter` is gone (the crossfade keyframes still animate it, and end). The hidden dock now rests below the window (`bottom: -300px`, as before) with no opacity; its pop fade-in is a keyframe `dock-in` that ends (flagged by a class set from the lazy card chunk, so the first-screen script does not grow). 2. **preload.spec.ts:89 + 4. lazy-offline.spec.ts:3**: the phone note card (`swipe-back` chunk, asked for as soon as the stack is up) imported `paperOf` from `lib/page-colour`, which the splitter had placed in `idle-screens`, so the card fetched all of idle-screens before idle. The card now takes its colour from the editor's CSS (`:is(.page, .pv)[data-paper=…]` in editor.css): no import, no new chunk, no duplicated hues. 3. **lazy-ui.spec.ts:70** (`SecurityError` on `cssRules`): was a knock-on of the early idle-screens fetch (gone with 2). The spec's stylesheet reads also now skip a sheet that cannot be read. - Specs that pinned the old resting opacity (`pane-transition`, `phone-foot`) now check "below the window, no opacity"; the card-paper check reads `data-paper`. Bisect: not needed; causes read from the #1014/pickers diff and confirmed by the specs. ## Gates (dev-01, head of this PR) - The four specs, `--repeat-each=5`, chromium-390 + webkit-390: **75 passed, 0 failed**. - Broad set (`glass glass-roots lazy preload pane-transition phone swipe picker-lazy tasks-lazy`), `--workers=1`: - chromium-390: 496 passed, 3 failed, 10 skipped. `swipe-guard.spec.ts:112` and `swipe-rows.spec.ts:437` fail the same on plain dev (3/3 on base, same binary), so not from this PR. `phone-bars.spec.ts:113` "all, sky light dawn" failed once on first run, passes alone on this branch and on base (3 reruns each). - webkit-390: 495 passed, 2 failed (the same two swipe specs, which fail on dev in chromium; not rerun on dev in WebKit). - chromium-1440: 80 passed, 0 failed. webkit-1440: 79 passed, 0 failed. - `perf/web.sh --bundle-only --gate`: exit 0. first_js_brotli 221.685 KB (dev budget 222.01, first-screen budget 240), first_css_brotli 17.746 KB, total_js_brotli 496.261 KB (budget 506.34); no new chunk, no budget file change. - Not run: svelte-check, vitest (this PR changes no types or logic outside two small Svelte/CSS edits). ## Frames (Mac VM, WebKit 390, 4 runs each, push + pop, light + dark) The Mac VM is 60 Hz with a noisy floor (p50 17 ms; frames of 70 to 120 ms appear in both variants). Base and after are equal within that noise: base p95 24 to 76 ms, max 79 to 120; after p95 26 to 43, max 68 to 117; frames over 16.7 ms: base 36 to 43, after 34 to 47 of about 65. The 120 Hz budget (p95 <= 8.3 ms) cannot be judged on this VM; it needs a real 120 Hz device. Nothing in the motion changed: same transitions on `translate`/`opacity` of the screens; only the resting values of the dock and wrapper changed. Before/after shots (light/dark, push mid-slide and pop) are in the comment below. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

kayg added 8 commits

2026-11-09 13:37:02 +00:00

fix(web): the phone note card no longer pulls idle-screens in before idle (page colours are their own chunk) (#1026 ) 97f719d683

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

fix(web): phone pane transition leaves no backdrop roots: no resting filter on the editor wrapper or card, the hidden list bar rests below the window with no opacity (#1026 ) 93a5e11a27

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

test(web): reading a stylesheet's rules skips a sheet the page may not read (#1026 ) 7e43db8cfe

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

fix(web): the page-colour chunk group comes before idle-screens, which pulls in what its modules import (#1026 ) 97377883ef

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

test(web): the list bar under a note is checked as below the window, not by opacity (#1026 ) 741c8ac092

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

perf(web): the dock's pop fade is flagged from the lazy card chunk, not the first screen's script; budget for the page-colour chunk (#1026 ) e37c91d250

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

perf(web): total JS budget carries the page-colour chunk's 0.3 KB (#1026 ) 69167fb97d

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

fix(web): the phone note card takes the page colour from the editor's CSS, so its lazy chunk no longer imports idle-screens; no extra chunk, no budget change (#1026 )

CI / server (pull_request) Waiting to run

Details

CI / rust (pull_request) Waiting to run

Details

CI / web (pull_request) Waiting to run

Details

Markdown extraction contract / markdown-native-contract (pull_request) Waiting to run

Details

Markdown extraction contract / markdown-editor-contract (pull_request) Waiting to run

Details

9c9be336f4

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

kayg commented

2026-11-09 13:37:15 +00:00

Author

Owner

Before (dev) / after (this PR), phone 390, WebKit on the Mac VM, light and dark: pane push mid-slide, pop mid-slide, pop at rest (list bar back). Sample data only.

before-push-light-mid.png

124 KiB

before-push-dark-mid.png

108 KiB

before-pop-light-rest.png

178 KiB

before-pop-dark-rest.png

153 KiB

after-push-light-mid.png

123 KiB

after-push-dark-mid.png

117 KiB