bzuccaro/ditto.site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Neutralize animation-owned transforms across viewports; probe-veto flex auto-width conversion

Browse Source 
- Nodes carrying an infinite CSS animation at ANY viewport get their frozen
  mid-animation transform zeroed at EVERY viewport (the @keyframes owns the
  property at runtime); animOwnedProps is now viewport-aware so breakpoint-
  gated marquees can't bake a mid-scroll translateX into other bands
- contentSizedFlexRow/contentSizedFlexItemAuto honor the sizing probe: a
  flex item whose captured width the probe proved load-bearing
  (wAuto=false) is never converted to width:auto, preserving narrow
  centered text columns

247 tests pass (7 new), typecheck clean.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Samraaj Bath
2026-07-04 00:18:56 -07:00
co-authored by Claude Fable 5
parent d5a713d31f
commit e33354cfb5
4 changed files with 189 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
compiler/src/generate/css.ts
+38 -6
View File
@@ -1540,6 +1540,18 @@ function contentSizedFlexRow(container: IRNode, viewports: number[]): Set<string
for (const vp of viewports) for (const it of items) {
const cs = it.computedByVp[vp]; if (cs && pf(cs.flexGrow) > 0) return null;
}
// The sizing probe is ground truth: if it proved `width:auto` does NOT reproduce an item's width at
// any painted viewport (`wAuto:false`), that item is load-bearing and cannot be dropped. Because this
// rule is all-or-nothing per line (dropping a subset shifts siblings via justify-content), one such
// item vetoes the whole line. This catches a wrapping-text item — e.g. a paragraph in a
// `justify-content:flex-end` row paints at its balanced-wrap width (below max-content), but
// `width:auto` on the block child fills the line to max-content — which the geometric slack test
// alone (no shrink fired) would wrongly convert to auto.
for (const it of items) {
for (const vp of viewports) {
if (it.sizingByVp?.[vp]?.wAuto === false) return null;
}
}
// At every width: the visible items + gaps + margins must not overflow the container (slack ≥ 0).
for (const vp of viewports) {
const pcs = container.computedByVp[vp]; const pb = container.bboxByVp[vp];
@@ -1923,6 +1935,12 @@ function contentSizedFlexItemAuto(node: IRNode, parentNode: IRNode | undefined,
const cs = node.computedByVp[vp]; const pcs = parentNode.computedByVp[vp];
const nb = node.bboxByVp[vp]; const pb = parentNode.bboxByVp[vp];
if (!cs || !pcs || !nb || !pb || !node.visibleByVp[vp] || (cs.display || "") === "none") continue;
// The sizing probe is ground truth: if it proved `width:auto` does NOT reproduce the captured
// width at any painted viewport (`wAuto:false`), the geometric "never shrank ⇒ at content size"
// read below is wrong — e.g. a wrapping paragraph in a `justify-content:flex-end` row paints at
// its balanced-wrap width (below max-content), but `width:auto` on the block child fills the line
// to max-content and left-aligns it. Honor the probe over the heuristic.
if (node.sizingByVp?.[vp]?.wAuto === false) return false;
if (!/^(flex|inline-flex)$/.test(pcs.display || "")) return false;
const dir = pcs.flexDirection || "row";
if (dir !== "row" && dir !== "row-reverse") return false; // width = main axis only for rows
@@ -2218,11 +2236,22 @@ function confersDefiniteHeight(node: IRNode, parentNode: IRNode | undefined, got
* change. transform-origin follows transform (skipped when no transform varies). */
const ANIM_OWNED = new Set(["opacity", "transform"]);
const EMPTY_SET = new Set<string>();
function animOwnedProps(node: IRNode, baseVp: number): Set<string> {
const cs = node.computedByVp[baseVp];
if (!cs || (cs.animationName || "none") === "none") return EMPTY_SET;
if (!/infinite/.test(cs.animationIterationCount || "1")) return EMPTY_SET;
return ANIM_OWNED;
/** True when an INFINITE CSS animation is active on the node at this viewport (so it perpetually
* drives opacity/transform — the captured value is a frozen animation phase, not design). */
function hasInfiniteAnim(cs: StyleMap | undefined): boolean {
if (!cs || (cs.animationName || "none") === "none") return false;
return /infinite/.test(cs.animationIterationCount || "1");
}
/** Properties an infinite animation owns (so their per-viewport captured values are frozen phase
* noise to suppress). Sampled across ALL emitted viewports, not just the base: a CSS marquee that
* runs only below a breakpoint (Webflow's `max-lg` logo/text tracks) is `animation:none` at the
* base (desktop) width but still freezes a random `translateX` at the mobile/tablet bands — banding
* those bakes a mid-scroll offset that shifts content offscreen at rest. When the animation owns the
* transform at ANY width, the frozen per-band deltas are dropped everywhere and the base value holds
* (the runtime `@keyframes` starts at translateX(0), so the strip renders aligned until it animates). */
function animOwnedProps(node: IRNode, viewports: number[]): Set<string> {
for (const vp of viewports) if (hasInfiniteAnim(node.computedByVp[vp])) return ANIM_OWNED;
return EMPTY_SET;
}
@@ -3292,7 +3321,10 @@ export function collectNodeRules(ir: IR, assetMap: Map<string, string>, includeN
dropInsets.delete("bottom");
dropInsets.delete("left");
}
const animOwned = animOwnedProps(node, baseVp); // opacity/transform driven by an infinite animation
// opacity/transform driven by an infinite animation at the base OR any emitted band (a marquee
// gated to a breakpoint owns the transform only where it runs, but freezes a mid-scroll offset
// at the OTHER bands — suppress those frozen deltas at every width).
const animOwned = animOwnedProps(node, [baseVp, ...bands.map((b) => b.vp)]);
const baseDecls = finalizeDecls(declsForViewport(node, parentNode?.computedByVp[baseVp], baseVp, assetMap, centeredBase, colorVar, ir.doc.perViewport[baseVp]?.scrollHeight, widthPlan, gridColsByVp?.get(baseVp), gridRowsByVp?.get(baseVp), flowH, dropInsets, leftPct, heightFill, geometry, dropGridRows, dropViewportMaxWidth, nowrapText, keepIdentityTransform), tokenResolver);
const nr: NodeRule = { base: baseDecls, bands: [] };
compiler/src/normalize/ir.ts
+33
View File
@@ -226,6 +226,35 @@ export function canonicalizeTransforms(computedByVp: Record<number, StyleMap>):
}
}
/** True when an INFINITE CSS animation is active at this viewport. Such an animation perpetually
* drives its animated properties (opacity/transform), so the captured value is a frozen phase of
* the loop, not authored design. */
function hasInfiniteAnimation(cs: StyleMap | undefined): boolean {
if (!cs || (cs.animationName || "none") === "none") return false;
return /infinite/.test(cs.animationIterationCount || "1");
}
/**
* Neutralize the transform of a node that carries an INFINITE animation at ANY captured viewport.
* The capture shutter froze the marquee/spinner mid-loop, and — critically — a CSS animation gated
* to a breakpoint (Webflow's `max-lg` logo/big-text tracks) reads `animation:none` at the widths
* where it does NOT run, yet the browser still reports the last frozen `translateX` there. Banding
* those frozen values bakes a mid-scroll offset that shifts content offscreen-left AT REST (rows
* starting mid-glyph). The runtime `@keyframes` owns the transform and starts at translateX(0), so
* the faithful at-rest value is `none` at every width; generation's `animOwnedProps` then keeps the
* base holding while the animation drives it live. Only fires when a genuine infinite animation is
* present at some viewport — a statically-offset design element (no animation) is untouched.
* Deterministic, in place; only touches the `transform` slot.
*/
export function neutralizeAnimatedTransforms(computedByVp: Record<number, StyleMap>): void {
const vps = Object.keys(computedByVp).map(Number);
if (!vps.some((vp) => hasInfiniteAnimation(computedByVp[vp]))) return;
for (const vp of vps) {
const cs = computedByVp[vp];
if (cs && cs.transform && cs.transform !== "none") cs.transform = "none";
}
}
/** Full identity signature (tag + id + class). */
function sigFull(n: RawNode): string {
return `${n.tag}#${n.attrs?.id ?? ""}.${(n.attrs?.class ?? "").trim()}`;
@@ -370,6 +399,10 @@ export function buildIR(sourceDir: string, viewports: number[], opts?: { motion?
// the generator's per-band delta treats them uniformly and a scroll/composite-noise transform
// at one width can't leak across bands.
canonicalizeTransforms(computedByVp);
// Drop transforms frozen mid-loop by an infinite animation (marquees/spinners) at every viewport —
// including the breakpoints where the animation is gated off but the browser still reports the last
// frozen offset. Prevents a baked mid-scroll translateX from clipping content offscreen at rest.
neutralizeAnimatedTransforms(computedByVp);
const node: IRNode = {
id: nextId(),