fix(pixel): cancel pending rAF on scroll reset; queue all containers per frame

Addresses two Cursor bugbot findings:

1. Stale rAF after reset() (medium): if a scroll event scheduled a rAF
   just before pixel.page() called resetScrollDepth(), the rAF would
   read the (still-stale) scrollTop of a reused container and fire
   milestones against the freshly-cleared set — misattributing scroll
   depth to the new page view. reset() now cancels any pending rAF.

2. Single pendingEl drops concurrent container scrolls (low): if two
   large containers fired scroll events in the same frame, only the
   later target was checked. Replaced pendingEl with a Set so every
   container that scrolled within the frame is processed on rAF.

Adds two regression tests.

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

Author: bkbooth

packages/audience/pixel/src/autocapture.test.ts

@@ -928,6 +928,70 @@ describe('autocapture', () => {
         expect(enqueue).toHaveBeenCalledTimes(2);
         expect(enqueue).toHaveBeenLastCalledWith('scroll_depth', { depth: 25 });
       });
+
+      it('cancels pending rAF so stale scroll position cannot fire against new page', () => {
+        const result = setupAutocapture({ scroll: true }, enqueue, () => consent);
+        teardown = result.teardown;
+
+        // User has scrolled to 50% — rAF is scheduled but has not yet fired.
+        (window as Record<string, unknown>).scrollY = 750;
+        document.dispatchEvent(new Event('scroll'));
+        expect(enqueue).not.toHaveBeenCalled(); // rAF not flushed yet
+
+        // SPA navigates: pixel.page() calls resetScroll() before the rAF fires.
+        // The reused container still reports scrollY = 750 momentarily.
+        result.resetScroll();
+
+        // Flushing the (now-cancelled) rAF must not fire any milestone against
+        // the new page view.
+        flushRAF();
+        expect(enqueue).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('concurrent containers', () => {
+      function setContainerGeometry(
+        el: HTMLElement,
+        scrollHeight: number,
+        clientHeight: number,
+        scrollTop: number,
+      ) {
+        Object.defineProperty(el, 'scrollHeight', { value: scrollHeight, configurable: true });
+        Object.defineProperty(el, 'clientHeight', { value: clientHeight, configurable: true });
+        Object.defineProperty(el, 'scrollTop', { value: scrollTop, configurable: true, writable: true });
+      }
+
+      beforeEach(() => {
+        setScrollGeometry(600, 600, 0);
+      });
+
+      it('processes every container that scrolled within a single rAF', () => {
+        setup({ scroll: true });
+
+        const main = document.createElement('div');
+        const sidebar = document.createElement('div');
+        setContainerGeometry(main, 2000, 500, 0);
+        setContainerGeometry(sidebar, 1000, 500, 0);
+        document.body.appendChild(main);
+        document.body.appendChild(sidebar);
+
+        // Two large containers scroll in the same frame (before rAF flush).
+        // main → 30% (450/1500), sidebar → 60% (300/500).
+        // Without per-container queueing, only the second target would be
+        // checked and main's milestone would be lost.
+        (main as Record<string, unknown>).scrollTop = 450;
+        main.dispatchEvent(new Event('scroll'));
+        (sidebar as Record<string, unknown>).scrollTop = 300;
+        sidebar.dispatchEvent(new Event('scroll'));
+
+        flushRAF();
+
+        // Both 25 (from main) and 50 (from sidebar) should fire — global dedup
+        // applies across all containers processed in the frame.
+        expect(enqueue).toHaveBeenCalledTimes(2);
+        expect(enqueue).toHaveBeenCalledWith('scroll_depth', { depth: 25 });
+        expect(enqueue).toHaveBeenCalledWith('scroll_depth', { depth: 50 });
+      });
     });
   });
 

packages/audience/pixel/src/autocapture.ts

@@ -77,8 +77,8 @@ function setupScrollTracking(
   getConsent: ConsentFn,
 ): { teardown: () => void; reset: () => void } {
   const fired = new Set<number>();
+  const pending = new Set<Element>();
   let rafId = 0;
-  let pendingEl: Element | null = null;
 
   const checkAndFire = (el: Element, scrollPos: number): void => {
     if (!canTrack(getConsent())) return;
@@ -97,6 +97,14 @@ function setupScrollTracking(
     }
   };
 
+  const cancelPending = (): void => {
+    pending.clear();
+    if (rafId) {
+      cancelAnimationFrame(rafId);
+      rafId = 0;
+    }
+  };
+
   const onScroll = (e: Event): void => {
     if (fired.size === SCROLL_MILESTONES.length) return;
 
@@ -107,18 +115,18 @@ function setupScrollTracking(
     // Ignore small containers (dropdowns, tooltips, autocompletes).
     if (target.clientHeight <= window.innerHeight * 0.5) return;
 
-    pendingEl = target;
+    pending.add(target);
 
     if (rafId) return;
     rafId = requestAnimationFrame(() => {
       rafId = 0;
-      const el = pendingEl;
-      pendingEl = null;
-      if (!el) return;
-      const scrollPos = el === document.documentElement
-        ? window.scrollY
-        : el.scrollTop;
-      checkAndFire(el, scrollPos);
+      pending.forEach((el) => {
+        const scrollPos = el === document.documentElement
+          ? window.scrollY
+          : el.scrollTop;
+        checkAndFire(el, scrollPos);
+      });
+      pending.clear();
     });
   };
 
@@ -130,10 +138,13 @@ function setupScrollTracking(
   return {
     teardown: () => {
       document.removeEventListener('scroll', onScroll, { capture: true });
-      if (rafId) cancelAnimationFrame(rafId);
+      cancelPending();
     },
+    // Cancel any pending rAF so a stale scroll position from the previous
+    // page view can't fire milestones against the freshly-cleared set.
     reset: () => {
       fired.clear();
+      cancelPending();
     },
   };
 }