From 9b21f4fde63e47afd309ea7dd4f5722836a6ffab Mon Sep 17 00:00:00 2001
From: Vadim Korolik <vkorolik@launchdarkly.com>
Date: Tue, 11 Aug 2026 13:03:42 -0700
Subject: [PATCH 1/2] fix(record): recover CSS rules when another script
 displaces the insertRule patch

CSS-in-JS rules only ever reached the replayer through the monkey patch on
CSSStyleSheet.prototype.insertRule, since the <style> elements emotion and
styled-components own hold no text and so have no copy of their contents beyond
the _cssText taken at serialization. Any script that reinstalls a previously
captured insertRule silently unhooks us and the replay is stuck with the CSS that
existed at snapshot time; a production session kept 734 of 2929 emotion rules
that way and replayed a MUI-heavy UI completely unstyled.

Recording now probes that its patch still runs, reinstalls it over whatever
displaced it, and re-sends the rules the replayer is missing. Teardown only
unwinds its own layer so that stopping a recorder cannot blind another script
that patched on top of it.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .changeset/stylesheet-rule-resync.md          |  28 ++
 packages/rrweb/src/record/index.ts            |   2 +
 packages/rrweb/src/record/observer.ts         | 444 +++++++++++++++---
 packages/rrweb/src/types.ts                   |  12 +
 .../test/record/stylesheet-resync.test.ts     | 231 +++++++++
 5 files changed, 645 insertions(+), 72 deletions(-)
 create mode 100644 .changeset/stylesheet-rule-resync.md
 create mode 100644 packages/rrweb/test/record/stylesheet-resync.test.ts

diff --git a/.changeset/stylesheet-rule-resync.md b/.changeset/stylesheet-rule-resync.md
new file mode 100644
index 00000000..88a182a3
--- /dev/null
+++ b/.changeset/stylesheet-rule-resync.md
@@ -0,0 +1,28 @@
+---
+"rrweb": minor
+---
+
+Recover CSS rules when another script displaces the `insertRule` patch.
+
+Everything a CSS-in-JS library (emotion, styled-components, goober) adds at
+runtime reached the replayer only through the monkey patch on
+`CSSStyleSheet.prototype.insertRule`, because the `<style>` elements they own hold
+no text and so have no other copy of their contents beyond the `_cssText` taken
+when the element was serialized. Any other script that reinstalls a previously
+captured `insertRule` — a session replay vendor tearing its own recorder down, or
+a second copy of rrweb bundled into the same app — unhooks us silently, and the
+replay is then frozen with whatever CSS existed at snapshot time. A production
+session was observed keeping 734 of 2929 emotion rules that way, which rendered a
+MUI-heavy UI completely unstyled.
+
+Recording now periodically checks that its patch still runs (by inserting into a
+throwaway constructed stylesheet, since function identity cannot distinguish a
+wrapper that still calls through from one that replaced us), reinstalls it over
+whatever displaced it, and re-sends the rules the replayer is missing. Controlled
+by the new `styleSheetResyncInterval` record option, in milliseconds; `0` disables
+it, default `2000`. The emitted events are ordinary `StyleSheetRule` mutations, so
+existing replayers need no changes.
+
+Teardown no longer restores these CSSOM methods unconditionally: it only unwinds
+its own layer, so stopping a recorder can no longer blind another script that
+patched on top of it.
diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts
index 29cb5dfb..e4578c00 100644
--- a/packages/rrweb/src/record/index.ts
+++ b/packages/rrweb/src/record/index.ts
@@ -100,6 +100,7 @@ function record<T = eventWithTime>(
     keepIframeSrcFn = () => false,
     privacySetting = 'default',
     ignoreCSSAttributes = new Set([]),
+    styleSheetResyncInterval = 2000,
     errorHandler,
     logger,
   } = options;
@@ -563,6 +564,7 @@ function record<T = eventWithTime>(
           processedNodeManager,
           canvasManager,
           ignoreCSSAttributes,
+          styleSheetResyncInterval,
           privacySetting,
           plugins:
             plugins
diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts
index d2da0cd4..79c3e9ba 100644
--- a/packages/rrweb/src/record/observer.ts
+++ b/packages/rrweb/src/record/observer.ts
@@ -3,6 +3,7 @@ import {
   maskInputValue,
   Mirror,
   getInputType,
+  isCSSImportRule,
   toLowerCase,
 } from 'rrweb-snapshot';
 import type { FontFaceSet } from 'css-font-loading-module';
@@ -35,6 +36,8 @@ import type {
   listenerHandler,
   scrollCallback,
   styleSheetRuleCallback,
+  styleSheetAddRule,
+  styleSheetDeleteRule,
   viewportResizeCallback,
   inputValue,
   inputCallback,
@@ -602,8 +605,42 @@ function getIdAndStyleId(
   };
 }
 
+/**
+ * Undo one of our monkey patches, but only while it is still the installed one.
+ *
+ * We are not the only script that patches these CSSOM methods: analytics and
+ * session replay vendors do it too, as does a second copy of rrweb when an app
+ * bundles one by accident. Each of them captures whatever is installed at load
+ * time and reinstalls it on teardown, so restoring unconditionally here would
+ * throw away their patch -- and anything layered on top of it -- leaving them
+ * silently blind for the rest of the page's lifetime. Only unwind our own layer.
+ */
+function restorePatchedMethod<T, K extends keyof T>(
+  target: T,
+  key: K,
+  ours: T[K],
+  restoreTo: T[K],
+): void {
+  if (target[key] === ours) {
+    target[key] = restoreTo;
+  }
+}
+
+/**
+ * How many times we will reinstall a displaced CSSOM patch before giving up and
+ * relying solely on the periodic reconciliation. Bounded so that a script which
+ * fights us on every tick cannot grow an unbounded chain of proxies.
+ */
+const MAX_CSSOM_REPATCH_ATTEMPTS = 5;
+
 function initStyleSheetObserver(
-  { styleSheetRuleCb, mirror, stylesheetManager }: observerParam,
+  {
+    styleSheetRuleCb,
+    mirror,
+    stylesheetManager,
+    doc,
+    styleSheetResyncInterval,
+  }: observerParam,
   { win }: { win: IWindow },
 ): listenerHandler {
   if (!win.CSSStyleSheet || !win.CSSStyleSheet.prototype) {
@@ -613,37 +650,119 @@ function initStyleSheetObserver(
     };
   }
 
-  // eslint-disable-next-line @typescript-eslint/unbound-method
-  const insertRule = win.CSSStyleSheet.prototype.insertRule;
-  win.CSSStyleSheet.prototype.insertRule = new Proxy(insertRule, {
-    apply: callbackWrapper(
-      (
-        target: typeof insertRule,
-        thisArg: CSSStyleSheet,
-        argumentsList: [string, number | undefined],
-      ) => {
-        const [rule, index] = argumentsList;
+  /**
+   * Per stylesheet bookkeeping for `resyncCssomStyleSheets`:
+   * - `reported`: how many top level rules the replayer is known to hold.
+   * - `everSeen`: the most rules the sheet has ever had, an upper bound on what
+   *   the replayer can be holding.
+   */
+  const reportedRuleCounts = new WeakMap<
+    CSSStyleSheet,
+    { reported: number; everSeen: number }
+  >();
+  /** Sheets whose rule indices we cannot reason about, see resyncCssomStyleSheets. */
+  const unreconcilableSheets = new WeakSet<CSSStyleSheet>();
+
+  /** Set while `captureIsHealthy` is checking that our patch still runs. */
+  let probing = false;
+  let probeWasObserved = false;
+  let probeSheet: CSSStyleSheet | undefined;
+
+  const noteReportedRules = (sheet: CSSStyleSheet, delta: number) => {
+    const state = reportedRuleCounts.get(sheet);
+    if (state) {
+      state.reported = Math.max(0, state.reported + delta);
+      state.everSeen = Math.max(state.everSeen, state.reported);
+    }
+  };
 
-        const { id, styleId } = getIdAndStyleId(
-          thisArg,
-          mirror,
-          stylesheetManager.styleMirror,
-        );
+  const patchInsertRule = (
+    target: typeof win.CSSStyleSheet.prototype.insertRule,
+  ) =>
+    new Proxy(target, {
+      apply: callbackWrapper(
+        (
+          nativeFn: typeof target,
+          thisArg: CSSStyleSheet,
+          argumentsList: [string, number | undefined],
+        ) => {
+          if (probing) {
+            probeWasObserved = true;
+            return nativeFn.apply(thisArg, argumentsList);
+          }
+          const [rule, index] = argumentsList;
 
-        if ((id && id !== -1) || (styleId && styleId !== -1)) {
-          styleSheetRuleCb({
-            id,
-            styleId,
-            adds: [{ rule, index }],
-          });
-        }
-        return target.apply(thisArg, argumentsList);
-      },
-    ),
-  });
+          const { id, styleId } = getIdAndStyleId(
+            thisArg,
+            mirror,
+            stylesheetManager.styleMirror,
+          );
+
+          const reported = (id && id !== -1) || (styleId && styleId !== -1);
+          if (reported) {
+            styleSheetRuleCb({
+              id,
+              styleId,
+              adds: [{ rule, index }],
+            });
+          }
+          const result = nativeFn.apply(thisArg, argumentsList);
+          // Only once the rule actually landed, so that a rule the browser
+          // rejects does not desynchronise our bookkeeping.
+          if (reported) {
+            noteReportedRules(thisArg, 1);
+          }
+          return result;
+        },
+      ),
+    });
+
+  const patchDeleteRule = (
+    target: typeof win.CSSStyleSheet.prototype.deleteRule,
+  ) =>
+    new Proxy(target, {
+      apply: callbackWrapper(
+        (
+          nativeFn: typeof target,
+          thisArg: CSSStyleSheet,
+          argumentsList: [number],
+        ) => {
+          if (probing) return nativeFn.apply(thisArg, argumentsList);
+          const [index] = argumentsList;
+
+          const { id, styleId } = getIdAndStyleId(
+            thisArg,
+            mirror,
+            stylesheetManager.styleMirror,
+          );
+
+          const reported = (id && id !== -1) || (styleId && styleId !== -1);
+          if (reported) {
+            styleSheetRuleCb({
+              id,
+              styleId,
+              removes: [{ index }],
+            });
+          }
+          const result = nativeFn.apply(thisArg, argumentsList);
+          if (reported) {
+            noteReportedRules(thisArg, -1);
+          }
+          return result;
+        },
+      ),
+    });
+
+  // eslint-disable-next-line @typescript-eslint/unbound-method
+  const insertRule = win.CSSStyleSheet.prototype.insertRule;
+  let insertRuleProxy = patchInsertRule(insertRule);
+  let restoreInsertRuleTo = insertRule;
+  win.CSSStyleSheet.prototype.insertRule = insertRuleProxy;
 
   // Support for deprecated addRule method
-  win.CSSStyleSheet.prototype.addRule = function (
+  // eslint-disable-next-line @typescript-eslint/unbound-method
+  const addRule = win.CSSStyleSheet.prototype.addRule;
+  const addRuleShim = function (
     this: CSSStyleSheet,
     selector: string,
     styleBlock: string,
@@ -652,50 +771,29 @@ function initStyleSheetObserver(
     const rule = `${selector} { ${styleBlock} }`;
     return win.CSSStyleSheet.prototype.insertRule.apply(this, [rule, index]);
   };
+  win.CSSStyleSheet.prototype.addRule = addRuleShim;
 
   // eslint-disable-next-line @typescript-eslint/unbound-method
   const deleteRule = win.CSSStyleSheet.prototype.deleteRule;
-  win.CSSStyleSheet.prototype.deleteRule = new Proxy(deleteRule, {
-    apply: callbackWrapper(
-      (
-        target: typeof deleteRule,
-        thisArg: CSSStyleSheet,
-        argumentsList: [number],
-      ) => {
-        const [index] = argumentsList;
-
-        const { id, styleId } = getIdAndStyleId(
-          thisArg,
-          mirror,
-          stylesheetManager.styleMirror,
-        );
-
-        if ((id && id !== -1) || (styleId && styleId !== -1)) {
-          styleSheetRuleCb({
-            id,
-            styleId,
-            removes: [{ index }],
-          });
-        }
-        return target.apply(thisArg, argumentsList);
-      },
-    ),
-  });
+  let deleteRuleProxy = patchDeleteRule(deleteRule);
+  let restoreDeleteRuleTo = deleteRule;
+  win.CSSStyleSheet.prototype.deleteRule = deleteRuleProxy;
 
   // Support for deprecated removeRule method
-  win.CSSStyleSheet.prototype.removeRule = function (
-    this: CSSStyleSheet,
-    index: number,
-  ) {
+  // eslint-disable-next-line @typescript-eslint/unbound-method
+  const removeRule = win.CSSStyleSheet.prototype.removeRule;
+  const removeRuleShim = function (this: CSSStyleSheet, index: number) {
     return win.CSSStyleSheet.prototype.deleteRule.apply(this, [index]);
   };
+  win.CSSStyleSheet.prototype.removeRule = removeRuleShim;
 
   let replace: (text: string) => Promise<CSSStyleSheet>;
+  let replaceProxy: typeof replace | undefined;
 
   if (win.CSSStyleSheet.prototype.replace) {
     // eslint-disable-next-line @typescript-eslint/unbound-method
     replace = win.CSSStyleSheet.prototype.replace;
-    win.CSSStyleSheet.prototype.replace = new Proxy(replace, {
+    replaceProxy = new Proxy(replace, {
       apply: callbackWrapper(
         (
           target: typeof replace,
@@ -721,13 +819,15 @@ function initStyleSheetObserver(
         },
       ),
     });
+    win.CSSStyleSheet.prototype.replace = replaceProxy;
   }
 
   let replaceSync: (text: string) => void;
+  let replaceSyncProxy: typeof replaceSync | undefined;
   if (win.CSSStyleSheet.prototype.replaceSync) {
     // eslint-disable-next-line @typescript-eslint/unbound-method
     replaceSync = win.CSSStyleSheet.prototype.replaceSync;
-    win.CSSStyleSheet.prototype.replaceSync = new Proxy(replaceSync, {
+    replaceSyncProxy = new Proxy(replaceSync, {
       apply: callbackWrapper(
         (
           target: typeof replaceSync,
@@ -753,6 +853,7 @@ function initStyleSheetObserver(
         },
       ),
     });
+    win.CSSStyleSheet.prototype.replaceSync = replaceSyncProxy;
   }
 
   const supportedNestedCSSRuleTypes: {
@@ -776,11 +877,15 @@ function initStyleSheetObserver(
     }
   }
 
+  type NestedRuleFunctions = {
+    insertRule: (rule: string, index?: number) => number;
+    deleteRule: (index: number) => void;
+  };
   const unmodifiedFunctions: {
-    [key: string]: {
-      insertRule: (rule: string, index?: number) => number;
-      deleteRule: (index: number) => void;
-    };
+    [key: string]: NestedRuleFunctions;
+  } = {};
+  const nestedProxies: {
+    [key: string]: NestedRuleFunctions;
   } = {};
 
   Object.entries(supportedNestedCSSRuleTypes).forEach(([typeKey, type]) => {
@@ -790,8 +895,9 @@ function initStyleSheetObserver(
       // eslint-disable-next-line @typescript-eslint/unbound-method
       deleteRule: type.prototype.deleteRule,
     };
+    nestedProxies[typeKey] = {} as NestedRuleFunctions;
 
-    type.prototype.insertRule = new Proxy(
+    nestedProxies[typeKey].insertRule = new Proxy(
       unmodifiedFunctions[typeKey].insertRule,
       {
         apply: callbackWrapper(
@@ -829,7 +935,7 @@ function initStyleSheetObserver(
       },
     );
 
-    type.prototype.deleteRule = new Proxy(
+    nestedProxies[typeKey].deleteRule = new Proxy(
       unmodifiedFunctions[typeKey].deleteRule,
       {
         apply: callbackWrapper(
@@ -860,16 +966,210 @@ function initStyleSheetObserver(
         ),
       },
     );
+
+    type.prototype.insertRule = nestedProxies[typeKey].insertRule;
+    type.prototype.deleteRule = nestedProxies[typeKey].deleteRule;
   });
 
+  /**
+   * Is our `insertRule` patch still being invoked?
+   *
+   * Comparing `CSSStyleSheet.prototype.insertRule` against our proxy is not
+   * enough: a well behaved script that patched on top of us still calls through,
+   * so identity differs while capture is perfectly healthy. Insert a rule into a
+   * throwaway constructed stylesheet instead and see whether our patch runs. It
+   * touches no DOM, so it produces no mutations of its own.
+   */
+  const captureIsHealthy = (): boolean => {
+    probing = true;
+    probeWasObserved = false;
+    try {
+      // A constructed sheet has no owner node and is not in the document, so
+      // nothing observes this but us.
+      const probe = probeSheet ?? (probeSheet = new win.CSSStyleSheet());
+      probe.insertRule(':root {}', 0);
+      probe.deleteRule(0);
+    } catch (error) {
+      // No constructed stylesheet support (older Safari); fall back to comparing
+      // identity, which at least catches an outright replacement.
+      return win.CSSStyleSheet.prototype.insertRule === insertRuleProxy;
+    } finally {
+      probing = false;
+    }
+    return probeWasObserved;
+  };
+
+  let repatchAttempts = 0;
+  /**
+   * Reinstall our `insertRule`/`deleteRule` patches, chaining over whatever is
+   * installed now rather than over the native method so that we do not in turn
+   * blind the script that displaced us.
+   */
+  const repatch = () => {
+    if (repatchAttempts >= MAX_CSSOM_REPATCH_ATTEMPTS) return;
+    repatchAttempts += 1;
+    restoreInsertRuleTo = win.CSSStyleSheet.prototype.insertRule;
+    insertRuleProxy = patchInsertRule(restoreInsertRuleTo);
+    win.CSSStyleSheet.prototype.insertRule = insertRuleProxy;
+    restoreDeleteRuleTo = win.CSSStyleSheet.prototype.deleteRule;
+    deleteRuleProxy = patchDeleteRule(restoreDeleteRuleTo);
+    win.CSSStyleSheet.prototype.deleteRule = deleteRuleProxy;
+  };
+
+  /**
+   * Re-send CSS rules that never made it into the recording.
+   *
+   * Every rule a CSS-in-JS library (emotion, styled-components, goober, ...)
+   * adds at runtime reaches the replayer through the `insertRule` patch above:
+   * the `<style>` elements they own carry no text, so the only other copy of
+   * their contents is the `_cssText` captured when the element was serialized.
+   * That makes the patch a single point of failure, and it is one that fails in
+   * the wild -- a script that reinstalls a previously captured
+   * `CSSStyleSheet.prototype.insertRule` unhooks us without a trace, and from
+   * then on the replay is frozen with whatever CSS existed at snapshot time. Real
+   * sessions have been seen keeping only 734 of 2929 emotion rules this way,
+   * which renders a MUI heavy UI completely unstyled.
+   *
+   * While the patch is healthy the replayer is in step with us by construction,
+   * so there is nothing to do and we only remember where each sheet has got to.
+   * Once it is not, we top the replayer up: the tail for a sheet that has grown
+   * (which is all any CSS-in-JS library does), or a wholesale replacement when we
+   * cannot tell which rules survived.
+   */
+  const resyncCssomStyleSheets = (trusted: boolean) => {
+    for (let i = 0; i < doc.styleSheets.length; i++) {
+      const sheet = doc.styleSheets[i] as CSSStyleSheet;
+      if (unreconcilableSheets.has(sheet)) continue;
+
+      const owner = sheet.ownerNode as HTMLElement | null;
+      if (!owner || toLowerCase(owner.nodeName) !== 'style') continue;
+      // A `<style>` element holding text is also recorded through text
+      // mutations, a channel that does not depend on our CSSOM patches.
+      if ((owner.textContent || '').trim().length) continue;
+
+      const id = mirror.getId(owner);
+      if (!id || id === -1) continue; // not serialized yet, nothing to top up
+
+      let rules: CSSRuleList;
+      try {
+        rules = sheet.cssRules;
+      } catch (error) {
+        continue; // cross origin, unreadable
+      }
+      const live = rules.length;
+
+      let state = reportedRuleCounts.get(sheet);
+      if (!state) {
+        // `@import`ed rules are inlined into `_cssText`, so the replayer holds a
+        // different number of rules than the sheet reports and every index we
+        // could derive would be wrong.
+        if (Array.from(rules).some((rule) => isCSSImportRule(rule))) {
+          unreconcilableSheets.add(sheet);
+          continue;
+        }
+        state = { reported: live, everSeen: live };
+        reportedRuleCounts.set(sheet, state);
+        if (trusted) continue; // `_cssText` plus our reports already cover it
+        // Capture was already broken when we first looked at this sheet, so we
+        // have no idea how much of it the replayer received. Replace the lot.
+        replaceReplayerCopy(id, state, rules);
+        continue;
+      }
+      state.everSeen = Math.max(state.everSeen, live);
+
+      if (live === state.reported) continue;
+
+      if (live > state.reported) {
+        const adds: styleSheetAddRule[] = [];
+        for (let index = state.reported; index < live; index++) {
+          adds.push({ rule: rules[index].cssText, index });
+        }
+        styleSheetRuleCb({ id, adds });
+        state.reported = live;
+      } else {
+        // Shrunk, so it was rewritten rather than appended to.
+        replaceReplayerCopy(id, state, rules);
+      }
+    }
+  };
+
+  /**
+   * Discard the replayer's copy of a stylesheet and re-send it in full.
+   *
+   * Deletes have to precede the inserts, and `applyStyleSheetRule` handles a
+   * single event's `adds` before its `removes`, so this takes two events. The
+   * deletes run from the highest rule count we have ever seen for the sheet
+   * (an upper bound on what the replayer can be holding) downwards, because
+   * deleting shifts every later index; over-deleting is harmless as the replayer
+   * ignores out of range indices.
+   */
+  function replaceReplayerCopy(
+    id: number,
+    state: { reported: number; everSeen: number },
+    rules: CSSRuleList,
+  ) {
+    const removes: styleSheetDeleteRule[] = [];
+    for (let index = state.everSeen - 1; index >= 0; index--) {
+      removes.push({ index });
+    }
+    if (removes.length) styleSheetRuleCb({ id, removes });
+    styleSheetRuleCb({
+      id,
+      adds: Array.from(rules, (rule, index) => ({
+        rule: rule.cssText,
+        index,
+      })),
+    });
+    state.reported = rules.length;
+    state.everSeen = rules.length;
+  }
+
+  let resyncTimer: number | undefined;
+  if (styleSheetResyncInterval > 0) {
+    resyncTimer = win.setInterval(
+      callbackWrapper(() => {
+        const healthy = captureIsHealthy();
+        if (!healthy) repatch();
+        resyncCssomStyleSheets(healthy);
+      }),
+      styleSheetResyncInterval,
+    );
+  }
+
   return callbackWrapper(() => {
-    win.CSSStyleSheet.prototype.insertRule = insertRule;
-    win.CSSStyleSheet.prototype.deleteRule = deleteRule;
-    replace && (win.CSSStyleSheet.prototype.replace = replace);
-    replaceSync && (win.CSSStyleSheet.prototype.replaceSync = replaceSync);
+    if (resyncTimer !== undefined) win.clearInterval(resyncTimer);
+    const proto = win.CSSStyleSheet.prototype;
+    restorePatchedMethod(
+      proto,
+      'insertRule',
+      insertRuleProxy,
+      restoreInsertRuleTo,
+    );
+    restorePatchedMethod(
+      proto,
+      'deleteRule',
+      deleteRuleProxy,
+      restoreDeleteRuleTo,
+    );
+    restorePatchedMethod(proto, 'addRule', addRuleShim, addRule);
+    restorePatchedMethod(proto, 'removeRule', removeRuleShim, removeRule);
+    replaceProxy &&
+      restorePatchedMethod(proto, 'replace', replaceProxy, replace);
+    replaceSyncProxy &&
+      restorePatchedMethod(proto, 'replaceSync', replaceSyncProxy, replaceSync);
     Object.entries(supportedNestedCSSRuleTypes).forEach(([typeKey, type]) => {
-      type.prototype.insertRule = unmodifiedFunctions[typeKey].insertRule;
-      type.prototype.deleteRule = unmodifiedFunctions[typeKey].deleteRule;
+      restorePatchedMethod(
+        type.prototype,
+        'insertRule',
+        nestedProxies[typeKey].insertRule,
+        unmodifiedFunctions[typeKey].insertRule,
+      );
+      restorePatchedMethod(
+        type.prototype,
+        'deleteRule',
+        nestedProxies[typeKey].deleteRule,
+        unmodifiedFunctions[typeKey].deleteRule,
+      );
     });
   });
 }
diff --git a/packages/rrweb/src/types.ts b/packages/rrweb/src/types.ts
index f52bc3ae..70874f29 100644
--- a/packages/rrweb/src/types.ts
+++ b/packages/rrweb/src/types.ts
@@ -59,6 +59,17 @@ export type recordOptions<T> = {
   maskTextFn?: MaskTextFn;
   slimDOMOptions?: SlimDOMOptions | 'all' | true;
   ignoreCSSAttributes?: Set<string>;
+  /**
+   * How often, in milliseconds, to reconcile CSSOM driven stylesheets (the
+   * `<style>` elements emotion, styled-components and friends write into via
+   * `insertRule`) against what has actually been recorded, re-sending any rules
+   * that were missed. Guards against other scripts on the page displacing our
+   * `CSSStyleSheet.prototype.insertRule` patch, which otherwise leaves the
+   * replay stuck with whatever CSS existed at snapshot time.
+   *
+   * Set to `0` to disable. Defaults to 2000.
+   */
+  styleSheetResyncInterval?: number;
   /**
    * @deprecated Since 2.0.0. This option is still supported, but is planned to
    * be superseded by future captureAssets asset recording APIs.
@@ -140,6 +151,7 @@ export type observerParam = {
   canvasManager: CanvasManager;
   processedNodeManager: ProcessedNodeManager;
   ignoreCSSAttributes: Set<string>;
+  styleSheetResyncInterval: number;
   plugins: Array<{
     observer: (
       cb: (...arg: Array<unknown>) => void,
diff --git a/packages/rrweb/test/record/stylesheet-resync.test.ts b/packages/rrweb/test/record/stylesheet-resync.test.ts
new file mode 100644
index 00000000..7cac13cd
--- /dev/null
+++ b/packages/rrweb/test/record/stylesheet-resync.test.ts
@@ -0,0 +1,231 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import type * as puppeteer from 'puppeteer';
+import { vi } from 'vitest';
+import type { recordOptions } from '../../src/types';
+import {
+  listenerHandler,
+  eventWithTime,
+  EventType,
+  IncrementalSource,
+  styleSheetRuleData,
+} from '@rrweb/types';
+import { launchPuppeteer } from '../utils';
+
+interface ISuite {
+  code: string;
+  browser: puppeteer.Browser;
+  page: puppeteer.Page;
+  events: eventWithTime[];
+}
+
+interface IWindow extends Window {
+  rrweb: {
+    record: (
+      options: recordOptions<eventWithTime>,
+    ) => listenerHandler | undefined;
+  };
+  emit: (e: eventWithTime) => undefined;
+}
+
+const setup = function (this: ISuite): ISuite {
+  const ctx = {} as ISuite;
+
+  beforeAll(async () => {
+    ctx.browser = await launchPuppeteer();
+    const bundlePath = path.resolve(__dirname, '../../dist/rrweb.umd.cjs');
+    ctx.code = fs.readFileSync(bundlePath, 'utf8');
+  });
+
+  beforeEach(async () => {
+    ctx.page = await ctx.browser.newPage();
+    await ctx.page.goto('about:blank');
+    await ctx.page.setContent('<!DOCTYPE html><html><body></body></html>');
+    await ctx.page.evaluate(ctx.code);
+    ctx.events = [];
+    await ctx.page.exposeFunction('emit', (e: eventWithTime) => {
+      if (e.type === EventType.DomContentLoaded || e.type === EventType.Load) {
+        return;
+      }
+      ctx.events.push(e);
+    });
+    ctx.page.on('console', (msg) => console.log('PAGE LOG:', msg.text()));
+  });
+
+  afterEach(async () => {
+    await ctx.page.close();
+  });
+
+  afterAll(async () => {
+    await ctx.browser.close();
+  });
+
+  return ctx;
+};
+
+const addedRules = (events: eventWithTime[]) =>
+  events
+    .filter(
+      (e) =>
+        e.type === EventType.IncrementalSnapshot &&
+        e.data.source === IncrementalSource.StyleSheetRule,
+    )
+    .flatMap((e) => (e.data as styleSheetRuleData).adds ?? [])
+    .map((add) => add.rule);
+
+/**
+ * A CSS-in-JS library's `<style>` element holds no text, so the rules it writes
+ * through `insertRule` only reach the replayer via our CSSOM patch. Other
+ * scripts on the page patch the same methods and reinstall what they captured
+ * when they tear down, which silently unhooks us -- so recording has to notice
+ * and recover rather than trusting the patch to stay put.
+ */
+describe('stylesheet resync', function (this: ISuite) {
+  vi.setConfig({ testTimeout: 20_000 });
+
+  const ctx: ISuite = setup.call(this);
+
+  it('re-sends rules inserted while the insertRule patch was displaced', async () => {
+    await ctx.page.evaluate(() => {
+      const { record } = (window as unknown as IWindow).rrweb;
+      // A third party script that loaded before us captures the pristine
+      // implementation, the way Hotjar and friends do.
+      const pristine = CSSStyleSheet.prototype.insertRule;
+
+      record({
+        emit: (window as unknown as IWindow).emit,
+        styleSheetResyncInterval: 50,
+      });
+
+      const styleElement = document.createElement('style');
+      document.head.appendChild(styleElement);
+      const sheet = styleElement.sheet as CSSStyleSheet;
+
+      // Let the element get serialized and a healthy resync tick run, so the
+      // recorder has a known starting point for this sheet.
+      setTimeout(() => {
+        // ...and now the third party tears down, restoring what it captured and
+        // dropping our patch on the floor.
+        CSSStyleSheet.prototype.insertRule = pristine;
+        sheet.insertRule('body { color: rgb(1, 2, 3); }', 0);
+      }, 200);
+    });
+
+    await ctx.page.waitForTimeout(600);
+
+    expect(addedRules(ctx.events)).toContain('body { color: rgb(1, 2, 3); }');
+  });
+
+  it('records rules again once the patch has been reinstated', async () => {
+    await ctx.page.evaluate(() => {
+      const { record } = (window as unknown as IWindow).rrweb;
+      const pristine = CSSStyleSheet.prototype.insertRule;
+
+      record({
+        emit: (window as unknown as IWindow).emit,
+        styleSheetResyncInterval: 50,
+      });
+
+      const styleElement = document.createElement('style');
+      document.head.appendChild(styleElement);
+      const sheet = styleElement.sheet as CSSStyleSheet;
+
+      setTimeout(() => {
+        CSSStyleSheet.prototype.insertRule = pristine;
+      }, 200);
+      // Long after the resync has had a chance to notice and repatch.
+      setTimeout(() => {
+        sheet.insertRule('body { color: rgb(4, 5, 6); }', 0);
+      }, 450);
+    });
+
+    await ctx.page.waitForTimeout(700);
+
+    expect(addedRules(ctx.events)).toContain('body { color: rgb(4, 5, 6); }');
+  });
+
+  it('leaves the recording alone when nothing displaces the patch', async () => {
+    await ctx.page.evaluate(() => {
+      const { record } = (window as unknown as IWindow).rrweb;
+      record({
+        emit: (window as unknown as IWindow).emit,
+        styleSheetResyncInterval: 50,
+      });
+
+      const styleElement = document.createElement('style');
+      document.head.appendChild(styleElement);
+      const sheet = styleElement.sheet as CSSStyleSheet;
+      setTimeout(() => {
+        sheet.insertRule('body { color: rgb(7, 8, 9); }', 0);
+      }, 200);
+    });
+
+    await ctx.page.waitForTimeout(600);
+
+    // Exactly once: reported by the patch, not duplicated by the resync.
+    expect(
+      addedRules(ctx.events).filter(
+        (rule) => rule === 'body { color: rgb(7, 8, 9); }',
+      ),
+    ).toHaveLength(1);
+  });
+
+  it('does not discard another script"s patch when recording stops', async () => {
+    const result = await ctx.page.evaluate(() => {
+      const { record } = (window as unknown as IWindow).rrweb;
+      const native = CSSStyleSheet.prototype.insertRule;
+
+      const stop = record({
+        emit: (window as unknown as IWindow).emit,
+        styleSheetResyncInterval: 0,
+      });
+
+      // A script that loads after us wraps our patch, so it depends on us
+      // leaving the prototype alone unless we are still the installed layer.
+      const ours = CSSStyleSheet.prototype.insertRule;
+      const theirs = function (
+        this: CSSStyleSheet,
+        rule: string,
+        index?: number,
+      ) {
+        return ours.apply(this, [rule, index] as [string, number | undefined]);
+      };
+      CSSStyleSheet.prototype.insertRule = theirs;
+
+      stop?.();
+
+      return {
+        theirPatchSurvived: CSSStyleSheet.prototype.insertRule === theirs,
+        restoredToNative: CSSStyleSheet.prototype.insertRule === native,
+      };
+    });
+
+    expect(result.theirPatchSurvived).toBe(true);
+    expect(result.restoredToNative).toBe(false);
+  });
+
+  it('still restores the native methods when it is the only patch', async () => {
+    const result = await ctx.page.evaluate(() => {
+      const { record } = (window as unknown as IWindow).rrweb;
+      const native = CSSStyleSheet.prototype.insertRule;
+      const nativeDelete = CSSStyleSheet.prototype.deleteRule;
+
+      const stop = record({
+        emit: (window as unknown as IWindow).emit,
+        styleSheetResyncInterval: 0,
+      });
+      const patched = CSSStyleSheet.prototype.insertRule !== native;
+      stop?.();
+
+      return {
+        patched,
+        insertRestored: CSSStyleSheet.prototype.insertRule === native,
+        deleteRestored: CSSStyleSheet.prototype.deleteRule === nativeDelete,
+      };
+    });
+
+    expect(result.patched).toBe(true);
+    expect(result.insertRestored).toBe(true);
+    expect(result.deleteRestored).toBe(true);
+  });
+});

From dfead4676075f80bb11fef168fae35a0d18ac530 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 13 Aug 2026 17:46:45 +0000
Subject: [PATCH 2/2] fix(record): stop the CSSOM patches from double reporting
 and outliving stop

Bugbot found three ways the recovery path could misbehave once more than one
layer of patches is in play on CSSStyleSheet.prototype.

Health is now judged per method. A script that reinstalls only insertRule -- the
common case -- used to make us reinstall deleteRule as well, even though our
delete patch was still in the call chain, so every later deletion was reported
twice and the rule bookkeeping drifted.

The proxies also guard against being chained over themselves: only the outermost
of ours reports a call. That is what makes the identity based health check safe
on browsers without constructed stylesheets, where a wrapper that calls through
cannot be told apart from a displacement and we would otherwise stack a second
insert proxy on top of the first.

Finally, teardown cannot uninstall a patch another script has wrapped, so the
patches now fall silent once recording has stopped rather than carrying on
emitting stylesheet mutations into a recording that is supposed to be over.

Co-Authored-By: Cursor Agent <cursoragent@cursor.com>

Co-authored-by: Vadim Korolik <vkorolik@launchdarkly.com>
---
 .changeset/stylesheet-rule-resync.md          |   5 +-
 packages/rrweb/src/record/observer.ts         | 114 +++++++++++---
 .../test/record/stylesheet-resync.test.ts     | 147 +++++++++++++++++-
 3 files changed, 239 insertions(+), 27 deletions(-)

diff --git a/.changeset/stylesheet-rule-resync.md b/.changeset/stylesheet-rule-resync.md
index 88a182a3..261bb0de 100644
--- a/.changeset/stylesheet-rule-resync.md
+++ b/.changeset/stylesheet-rule-resync.md
@@ -25,4 +25,7 @@ existing replayers need no changes.
 
 Teardown no longer restores these CSSOM methods unconditionally: it only unwinds
 its own layer, so stopping a recorder can no longer blind another script that
-patched on top of it.
+patched on top of it. A patch that has to stay installed for that reason falls
+silent once recording has stopped, and only the outermost of the recorder's own
+patches reports a call, so a method reinstalled over an earlier patch of ours
+cannot report the same rule twice.
diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts
index 79c3e9ba..eaedcfa7 100644
--- a/packages/rrweb/src/record/observer.ts
+++ b/packages/rrweb/src/record/observer.ts
@@ -665,9 +665,25 @@ function initStyleSheetObserver(
 
   /** Set while `captureIsHealthy` is checking that our patch still runs. */
   let probing = false;
-  let probeWasObserved = false;
+  let probeInsertObserved = false;
+  let probeDeleteObserved = false;
   let probeSheet: CSSStyleSheet | undefined;
 
+  /**
+   * Set on teardown. A proxy of ours that another script has wrapped stays in
+   * the call chain after we stop -- see `restorePatchedMethod` -- so it has to
+   * fall silent by itself rather than relying on being uninstalled.
+   */
+  let stopped = false;
+
+  /**
+   * Reinstalling a displaced patch chains it over whatever is installed now,
+   * which can leave an earlier proxy of ours further down the same chain. Both
+   * would otherwise report the same call. Only the outermost one does.
+   */
+  let insideInsertRule = false;
+  let insideDeleteRule = false;
+
   const noteReportedRules = (sheet: CSSStyleSheet, delta: number) => {
     const state = reportedRuleCounts.get(sheet);
     if (state) {
@@ -687,7 +703,10 @@ function initStyleSheetObserver(
           argumentsList: [string, number | undefined],
         ) => {
           if (probing) {
-            probeWasObserved = true;
+            probeInsertObserved = true;
+            return nativeFn.apply(thisArg, argumentsList);
+          }
+          if (stopped || insideInsertRule) {
             return nativeFn.apply(thisArg, argumentsList);
           }
           const [rule, index] = argumentsList;
@@ -706,7 +725,13 @@ function initStyleSheetObserver(
               adds: [{ rule, index }],
             });
           }
-          const result = nativeFn.apply(thisArg, argumentsList);
+          insideInsertRule = true;
+          let result;
+          try {
+            result = nativeFn.apply(thisArg, argumentsList);
+          } finally {
+            insideInsertRule = false;
+          }
           // Only once the rule actually landed, so that a rule the browser
           // rejects does not desynchronise our bookkeeping.
           if (reported) {
@@ -727,7 +752,13 @@ function initStyleSheetObserver(
           thisArg: CSSStyleSheet,
           argumentsList: [number],
         ) => {
-          if (probing) return nativeFn.apply(thisArg, argumentsList);
+          if (probing) {
+            probeDeleteObserved = true;
+            return nativeFn.apply(thisArg, argumentsList);
+          }
+          if (stopped || insideDeleteRule) {
+            return nativeFn.apply(thisArg, argumentsList);
+          }
           const [index] = argumentsList;
 
           const { id, styleId } = getIdAndStyleId(
@@ -744,7 +775,13 @@ function initStyleSheetObserver(
               removes: [{ index }],
             });
           }
-          const result = nativeFn.apply(thisArg, argumentsList);
+          insideDeleteRule = true;
+          let result;
+          try {
+            result = nativeFn.apply(thisArg, argumentsList);
+          } finally {
+            insideDeleteRule = false;
+          }
           if (reported) {
             noteReportedRules(thisArg, -1);
           }
@@ -800,6 +837,7 @@ function initStyleSheetObserver(
           thisArg: CSSStyleSheet,
           argumentsList: [string],
         ) => {
+          if (stopped) return target.apply(thisArg, argumentsList);
           const [text] = argumentsList;
 
           const { id, styleId } = getIdAndStyleId(
@@ -834,6 +872,7 @@ function initStyleSheetObserver(
           thisArg: CSSStyleSheet,
           argumentsList: [string],
         ) => {
+          if (stopped) return target.apply(thisArg, argumentsList);
           const [text] = argumentsList;
 
           const { id, styleId } = getIdAndStyleId(
@@ -906,6 +945,7 @@ function initStyleSheetObserver(
             thisArg: CSSRule,
             argumentsList: [string, number | undefined],
           ) => {
+            if (stopped) return target.apply(thisArg, argumentsList);
             const [rule, index] = argumentsList;
 
             const { id, styleId } = getIdAndStyleId(
@@ -944,6 +984,7 @@ function initStyleSheetObserver(
             thisArg: CSSRule,
             argumentsList: [number],
           ) => {
+            if (stopped) return target.apply(thisArg, argumentsList);
             const [index] = argumentsList;
 
             const { id, styleId } = getIdAndStyleId(
@@ -971,18 +1012,25 @@ function initStyleSheetObserver(
     type.prototype.deleteRule = nestedProxies[typeKey].deleteRule;
   });
 
+  type CssomCaptureHealth = { insertRule: boolean; deleteRule: boolean };
+
   /**
-   * Is our `insertRule` patch still being invoked?
+   * Are our `insertRule` and `deleteRule` patches still being invoked?
    *
    * Comparing `CSSStyleSheet.prototype.insertRule` against our proxy is not
    * enough: a well behaved script that patched on top of us still calls through,
    * so identity differs while capture is perfectly healthy. Insert a rule into a
    * throwaway constructed stylesheet instead and see whether our patch runs. It
    * touches no DOM, so it produces no mutations of its own.
+   *
+   * The two methods are reported separately because scripts routinely displace
+   * only one of them, and reinstalling a patch that is still in the chain would
+   * put two of our proxies in it.
    */
-  const captureIsHealthy = (): boolean => {
+  const captureIsHealthy = (): CssomCaptureHealth => {
     probing = true;
-    probeWasObserved = false;
+    probeInsertObserved = false;
+    probeDeleteObserved = false;
     try {
       // A constructed sheet has no owner node and is not in the document, so
       // nothing observes this but us.
@@ -991,29 +1039,43 @@ function initStyleSheetObserver(
       probe.deleteRule(0);
     } catch (error) {
       // No constructed stylesheet support (older Safari); fall back to comparing
-      // identity, which at least catches an outright replacement.
-      return win.CSSStyleSheet.prototype.insertRule === insertRuleProxy;
+      // identity, which at least catches an outright replacement. It also reads
+      // a cooperative wrapper as a displacement, hence the re-entrancy guards in
+      // the proxies: chaining over ourselves must not report a call twice.
+      return {
+        insertRule: win.CSSStyleSheet.prototype.insertRule === insertRuleProxy,
+        deleteRule: win.CSSStyleSheet.prototype.deleteRule === deleteRuleProxy,
+      };
     } finally {
       probing = false;
     }
-    return probeWasObserved;
+    return {
+      insertRule: probeInsertObserved,
+      deleteRule: probeDeleteObserved,
+    };
   };
 
   let repatchAttempts = 0;
   /**
-   * Reinstall our `insertRule`/`deleteRule` patches, chaining over whatever is
-   * installed now rather than over the native method so that we do not in turn
-   * blind the script that displaced us.
+   * Reinstall whichever of our `insertRule`/`deleteRule` patches has been
+   * displaced, chaining over whatever is installed now rather than over the
+   * native method so that we do not in turn blind the script that displaced us.
    */
-  const repatch = () => {
+  const repatch = (health: CssomCaptureHealth) => {
     if (repatchAttempts >= MAX_CSSOM_REPATCH_ATTEMPTS) return;
     repatchAttempts += 1;
-    restoreInsertRuleTo = win.CSSStyleSheet.prototype.insertRule;
-    insertRuleProxy = patchInsertRule(restoreInsertRuleTo);
-    win.CSSStyleSheet.prototype.insertRule = insertRuleProxy;
-    restoreDeleteRuleTo = win.CSSStyleSheet.prototype.deleteRule;
-    deleteRuleProxy = patchDeleteRule(restoreDeleteRuleTo);
-    win.CSSStyleSheet.prototype.deleteRule = deleteRuleProxy;
+    if (!health.insertRule) {
+      // eslint-disable-next-line @typescript-eslint/unbound-method
+      restoreInsertRuleTo = win.CSSStyleSheet.prototype.insertRule;
+      insertRuleProxy = patchInsertRule(restoreInsertRuleTo);
+      win.CSSStyleSheet.prototype.insertRule = insertRuleProxy;
+    }
+    if (!health.deleteRule) {
+      // eslint-disable-next-line @typescript-eslint/unbound-method
+      restoreDeleteRuleTo = win.CSSStyleSheet.prototype.deleteRule;
+      deleteRuleProxy = patchDeleteRule(restoreDeleteRuleTo);
+      win.CSSStyleSheet.prototype.deleteRule = deleteRuleProxy;
+    }
   };
 
   /**
@@ -1038,7 +1100,7 @@ function initStyleSheetObserver(
    */
   const resyncCssomStyleSheets = (trusted: boolean) => {
     for (let i = 0; i < doc.styleSheets.length; i++) {
-      const sheet = doc.styleSheets[i] as CSSStyleSheet;
+      const sheet = doc.styleSheets[i];
       if (unreconcilableSheets.has(sheet)) continue;
 
       const owner = sheet.ownerNode as HTMLElement | null;
@@ -1128,8 +1190,9 @@ function initStyleSheetObserver(
   if (styleSheetResyncInterval > 0) {
     resyncTimer = win.setInterval(
       callbackWrapper(() => {
-        const healthy = captureIsHealthy();
-        if (!healthy) repatch();
+        const health = captureIsHealthy();
+        const healthy = health.insertRule && health.deleteRule;
+        if (!healthy) repatch(health);
         resyncCssomStyleSheets(healthy);
       }),
       styleSheetResyncInterval,
@@ -1138,6 +1201,9 @@ function initStyleSheetObserver(
 
   return callbackWrapper(() => {
     if (resyncTimer !== undefined) win.clearInterval(resyncTimer);
+    // Any of our proxies that another script has wrapped stays in the call
+    // chain below their patch, so they check this before reporting anything.
+    stopped = true;
     const proto = win.CSSStyleSheet.prototype;
     restorePatchedMethod(
       proto,
diff --git a/packages/rrweb/test/record/stylesheet-resync.test.ts b/packages/rrweb/test/record/stylesheet-resync.test.ts
index 7cac13cd..f3a0b568 100644
--- a/packages/rrweb/test/record/stylesheet-resync.test.ts
+++ b/packages/rrweb/test/record/stylesheet-resync.test.ts
@@ -63,16 +63,25 @@ const setup = function (this: ISuite): ISuite {
   return ctx;
 };
 
-const addedRules = (events: eventWithTime[]) =>
+const styleSheetRuleEvents = (events: eventWithTime[]) =>
   events
     .filter(
       (e) =>
         e.type === EventType.IncrementalSnapshot &&
         e.data.source === IncrementalSource.StyleSheetRule,
     )
-    .flatMap((e) => (e.data as styleSheetRuleData).adds ?? [])
+    .map((e) => e.data as styleSheetRuleData);
+
+const addedRules = (events: eventWithTime[]) =>
+  styleSheetRuleEvents(events)
+    .flatMap((data) => data.adds ?? [])
     .map((add) => add.rule);
 
+const removedIndices = (events: eventWithTime[]) =>
+  styleSheetRuleEvents(events)
+    .flatMap((data) => data.removes ?? [])
+    .map((remove) => remove.index);
+
 /**
  * A CSS-in-JS library's `<style>` element holds no text, so the rules it writes
  * through `insertRule` only reach the replayer via our CSSOM patch. Other
@@ -170,6 +179,140 @@ describe('stylesheet resync', function (this: ISuite) {
     ).toHaveLength(1);
   });
 
+  it('reports a deletion once when only the insertRule patch was displaced', async () => {
+    await ctx.page.evaluate(() => {
+      const { record } = (window as unknown as IWindow).rrweb;
+      const pristineInsert = CSSStyleSheet.prototype.insertRule;
+
+      record({
+        emit: (window as unknown as IWindow).emit,
+        styleSheetResyncInterval: 50,
+      });
+
+      const styleElement = document.createElement('style');
+      document.head.appendChild(styleElement);
+      const sheet = styleElement.sheet as CSSStyleSheet;
+
+      // Only `insertRule` is put back, which is what a script that patched just
+      // that one method does on teardown. Our `deleteRule` patch is untouched
+      // and still in the call chain, so it must not be wrapped a second time.
+      setTimeout(() => {
+        CSSStyleSheet.prototype.insertRule = pristineInsert;
+      }, 200);
+      setTimeout(() => {
+        sheet.insertRule('body { color: rgb(10, 11, 12); }', 0);
+        sheet.deleteRule(0);
+      }, 450);
+    });
+
+    await ctx.page.waitForTimeout(700);
+
+    expect(
+      addedRules(ctx.events).filter(
+        (rule) => rule === 'body { color: rgb(10, 11, 12); }',
+      ),
+    ).toHaveLength(1);
+    expect(removedIndices(ctx.events)).toEqual([0]);
+  });
+
+  it('reports an insertion once when it has to chain over its own patch', async () => {
+    await ctx.page.evaluate(() => {
+      const { record } = (window as unknown as IWindow).rrweb;
+
+      // Pretend we are on a browser without constructed stylesheets (older
+      // Safari), where health can only be judged by function identity and a
+      // cooperative wrapper is indistinguishable from a displacement.
+      const RealCSSStyleSheet = window.CSSStyleSheet;
+      window.CSSStyleSheet = new Proxy(RealCSSStyleSheet, {
+        construct() {
+          throw new Error('constructed stylesheets are unsupported here');
+        },
+      });
+
+      record({
+        emit: (window as unknown as IWindow).emit,
+        styleSheetResyncInterval: 50,
+      });
+
+      const styleElement = document.createElement('style');
+      document.head.appendChild(styleElement);
+      const sheet = styleElement.sheet as CSSStyleSheet;
+
+      setTimeout(() => {
+        // A well behaved wrapper: it calls through, so our patch still runs.
+        const ours = CSSStyleSheet.prototype.insertRule;
+        CSSStyleSheet.prototype.insertRule = function (
+          this: CSSStyleSheet,
+          rule: string,
+          index?: number,
+        ) {
+          return ours.apply(this, [rule, index] as [
+            string,
+            number | undefined,
+          ]);
+        };
+      }, 200);
+      setTimeout(() => {
+        sheet.insertRule('body { color: rgb(13, 14, 15); }', 0);
+      }, 450);
+    });
+
+    await ctx.page.waitForTimeout(700);
+
+    expect(
+      addedRules(ctx.events).filter(
+        (rule) => rule === 'body { color: rgb(13, 14, 15); }',
+      ),
+    ).toHaveLength(1);
+  });
+
+  it('stops recording rules through a patch another script kept alive', async () => {
+    await ctx.page.evaluate(() => {
+      const { record } = (window as unknown as IWindow).rrweb;
+
+      const stop = record({
+        emit: (window as unknown as IWindow).emit,
+        styleSheetResyncInterval: 0,
+      });
+
+      const styleElement = document.createElement('style');
+      document.head.appendChild(styleElement);
+      const sheet = styleElement.sheet as CSSStyleSheet;
+
+      // Once the element is serialized, rules written to it are recorded.
+      setTimeout(() => {
+        sheet.insertRule('body { color: rgb(16, 17, 18); }', 0);
+      }, 200);
+
+      setTimeout(() => {
+        // A script that wraps us keeps our proxy in the call chain, so stopping
+        // cannot uninstall it -- it has to fall silent on its own.
+        const ours = CSSStyleSheet.prototype.insertRule;
+        CSSStyleSheet.prototype.insertRule = function (
+          this: CSSStyleSheet,
+          rule: string,
+          index?: number,
+        ) {
+          return ours.apply(this, [rule, index] as [
+            string,
+            number | undefined,
+          ]);
+        };
+        stop?.();
+        sheet.insertRule('body { color: rgb(19, 20, 21); }', 0);
+      }, 400);
+    });
+
+    await ctx.page.waitForTimeout(600);
+
+    expect(addedRules(ctx.events)).toContain(
+      'body { color: rgb(16, 17, 18); }',
+    );
+    expect(addedRules(ctx.events)).not.toContain(
+      'body { color: rgb(19, 20, 21); }',
+    );
+  });
+
   it('does not discard another script"s patch when recording stops', async () => {
     const result = await ctx.page.evaluate(() => {
       const { record } = (window as unknown as IWindow).rrweb;