Fix mobile chip-strip overlap, reveal-replay stagger, scroll-linked text-fill

Three clone-fidelity fixes from manual review of the acceptance screenshots.

Fix 1 — mobile nav chip-strip overlap (generate/css.ts). A horizontally
scrollable flex strip (overflow-x:auto flex <ul>) of nowrap chips collapsed
because the base viewport reported min-width:0px on the chips (a mobile-only
strip that is 0-wide at desktop), so the generator emitted `min-w-0`, letting
the chips shrink below their content instead of overflowing — the nowrap text
then collided. Suppress `min-w-0` for a nowrap flex item whose flex parent
scrolls horizontally; scoped away from legitimate min-w-0 truncation (whose
parent does not scroll-x). Verified on a fresh ooni.com clone: 0 chip overlaps
at 375, scrollWidth 776 > clientWidth 375.

Fix 2 — reveal-replay stagger leaves tiles unpainted (generate/motion.ts).
DittoMotion re-hid each revealed element and replayed its entrance on
scroll-into-view preserving the captured delay/duration, so a fast scroll /
full-page screenshot caught most grid tiles mid-entrance. Cap the replayed
delay (<=300ms) and duration (<=600ms), settle each tile per-element a bounded
time after it enters view, and make the global failsafe settle (not re-animate)
so nothing stays hidden. Validator settle path (__dittoMotionStop) unchanged.
Verified: cropin cotton renders 12/12 crop tiles in a normal full-page pass;
motion gate reveals 24/24.

Fix 3 — scroll-linked text-fill frozen at end state (capture/stabilize.ts,
capture/capture.ts, generate/css.ts). A view-timeline text-fill
(animation-duration resolves to `auto`) was baked filled: the clone has no
scroll timeline, so emitting the animation made it jump to its end keyframe via
fill-mode:both. Capture-side, cancel scroll/view-timeline animations before each
snapshot so the DOM records the at-rest state; generation-side, suppress the
animation-* props when animation-duration is `auto` (we render the at-rest
state, never replay a scroll-linked animation). Teach the motion gate to exclude
these from the static-CSS expectation so the gate stays honest. Verified on a
fresh ooni clone: the "world's no.1 pizza ovens" em is white/gray (rgb 240,240,
240), not filled yellow, at rest; motion gate still passes.

Tests: +7 fixtures (css scroll-strip + scroll-timeline, reveal-replay caps,
motion-gate scroll-timeline exclusion); 123/123 compiler tests green, full test
suite green, typecheck clean. No gate regression on the fresh ooni run vs the
20260704-024247 baseline (all gate pass/fail unchanged; perceptual within
0.0004; motion restored to pass).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Samraaj Bath
2026-07-03 21:46:28 -07:00
co-authored by Claude Fable 5
parent f3d433c024
commit afab12ff14
8 changed files with 251 additions and 11 deletions
+21
View File
@@ -132,4 +132,25 @@ describe("scroll-reveal settling + replay capture (integration)", () => {
// Validator settle path reveals WITHOUT replaying (no mid-entrance graded frames).
assert.match(DITTO_MOTION_TSX, /f\(false\)/);
});
// Fix 2 — reveal-replay stagger must not leave tiles unpainted. A long captured entrance
// delay/duration replayed on scroll-into-view means a fast scroll / full-page screenshot
// catches most tiles mid-entrance. The replay caps the delay + duration and force-settles
// each tile shortly after it enters view, so tiles paint promptly and none stay hidden.
it("caps the replayed entrance delay and duration", () => {
// The animate path uses the clamp helpers rather than the raw captured values.
assert.match(DITTO_MOTION_TSX, /el\.style\.animationDuration = clampDuration\(rv\.animationDuration\)/);
assert.match(DITTO_MOTION_TSX, /el\.style\.animationDelay = clampDelay\(rv\.animationDelay\)/);
// Caps are bounded (delay <= 300ms, duration <= 600ms).
assert.match(DITTO_MOTION_TSX, /REVEAL_MAX_DELAY_MS = 300/);
assert.match(DITTO_MOTION_TSX, /REVEAL_MAX_DURATION_MS = 600/);
});
it("force-settles each revealed tile per-element and settles everything at the failsafe", () => {
// Per-element settle timer jumps a tile to its settled frame a bounded time after it animates
// in (so it can't be caught mid-entrance regardless of WHEN it scrolled into view).
assert.match(DITTO_MOTION_TSX, /settleTimers\.push\(setTimeout\(\(\) => f\(false\), settleAfter\)\)/);
// Global failsafe settles (animate=false) rather than re-animating — nothing stays hidden.
assert.match(DITTO_MOTION_TSX, /forceTimer = setTimeout\(\(\) => \{ for \(const f of revealed\) f\(false\); \}, 4000\)/);
});
});