@boostdev/design-system-components 2.4.1 → 2.4.2

package/src/components/layout/Grid/Grid.spec.tsx

@@ -196,6 +196,37 @@ describe('applyMasonryLayout', () => {
     expect(b.style.alignSelf).toBe('start');
   });
 
+  it('skips re-writing row-spans when measured heights match the cached value', () => {
+    // ResizeObserver fires freely on `<img>` decode in Firefox even when the
+    // parent's reserved aspect-ratio box hasn't actually changed. Without this
+    // short-circuit, every fire triggers a `grid-auto-flow: dense` re-pack —
+    // visible as image overlap during fast scroll because Firefox's compositor
+    // hasn't caught up with the newly shuffled item positions.
+    const container = makeContainer(10);
+    const item = makeItem(50);
+    container.append(item);
+    applyMasonryLayout(container, [item]);
+    expect(item.style.gridRowEnd).toBe('span 60');
+
+    // Simulate something else writing to gridRowEnd — if the polyfill re-runs
+    // unnecessarily, this would be overwritten.
+    item.style.gridRowEnd = 'span 999';
+    applyMasonryLayout(container, [item]);
+    expect(item.style.gridRowEnd).toBe('span 999');
+  });
+
+  it('re-writes row-spans when measured heights change', () => {
+    const container = makeContainer(10);
+    const item = makeItem(50);
+    container.append(item);
+    applyMasonryLayout(container, [item]);
+    expect(item.style.gridRowEnd).toBe('span 60');
+
+    Object.defineProperty(item, 'offsetHeight', { configurable: true, value: 80 });
+    applyMasonryLayout(container, [item]);
+    expect(item.style.gridRowEnd).toBe('span 90');
+  });
+
   it('clearMasonryLayout undoes container and child styles', () => {
     const container = makeContainer(10);
     const item = makeItem(50);

package/src/components/layout/Grid/masonry.ts

@@ -95,6 +95,16 @@ export type MasonryOptions = {
 // items pinned to their polyfill-assigned span.
 const ORIGINAL_COL_ATTR = 'data-bds-masonry-original-column';
 
+// Data attribute caching the last applied row-span. Used to short-circuit no-op
+// re-runs: when every child's newly-measured span matches the cached value, the
+// polyfill skips all writes. This prevents `grid-auto-flow: dense` from
+// re-packing on spurious ResizeObserver fires (subpixel fluctuations, `<img>`
+// decode in Firefox where offsetHeight briefly wobbles). Dense re-packing
+// during fast scroll in Firefox is visible as images overlapping, because
+// Firefox's compositor paints cached tiles from the pre-shuffle layout on top
+// of the newly laid out items for a frame or two.
+const LAST_SPAN_ATTR = 'data-bds-masonry-span';
+
 export function applyMasonryLayout(
   container: HTMLElement,
   rawChildren: HTMLElement[],
@@ -180,11 +190,27 @@ export function applyMasonryLayout(
   // O(N) forced-reflow cost of a read-then-write loop.
   const heights = children.map((child) => child.offsetHeight);
 
+  // Compute spans; skip the entire write pass if every span matches the
+  // previously-applied value. ResizeObserver fires freely in Firefox during
+  // image decode and scroll — without this guard, each fire triggers a dense
+  // re-pack that's visible as overlap on fast scroll (the compositor hasn't
+  // caught up with the newly shuffled positions).
+  const spans = heights.map((h) => Math.max(1, Math.ceil(h + targetGap)));
+  let changed = false;
+  for (let i = 0; i < children.length; i++) {
+    const prev = children[i].getAttribute(LAST_SPAN_ATTR);
+    if (prev !== String(spans[i])) {
+      changed = true;
+      break;
+    }
+  }
+  if (!changed) return;
+
   // Pass 3 — batch all row-span writes. No reads in between, so the browser can
   // coalesce style invalidation and do layout once for the whole batch.
   for (let i = 0; i < children.length; i++) {
-    const span = Math.max(1, Math.ceil(heights[i] + targetGap));
-    children[i].style.gridRowEnd = `span ${span}`;
+    children[i].style.gridRowEnd = `span ${spans[i]}`;
+    children[i].setAttribute(LAST_SPAN_ATTR, String(spans[i]));
   }
 }
 
@@ -230,6 +256,7 @@ export function clearMasonryLayout(container: HTMLElement, rawChildren: HTMLElem
     child.style.gridRowEnd = '';
     child.style.alignSelf = '';
     child.style.overflowAnchor = '';
+    child.removeAttribute(LAST_SPAN_ATTR);
     // Restore any `gridColumn` value the polyfill overwrote. Items the
     // polyfill never touched have no ORIGINAL_COL_ATTR and are left alone.
     restoreOriginalColumn(child);