From 8833d3c7ce920e1e066a09eedaac342640f047b4 Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Wed, 1 Apr 2026 12:00:00 +0800
Subject: [PATCH] Ensure animations don't continue playing when we've paused
 playback (#417)

---
 src/replay/index.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/replay/index.ts b/src/replay/index.ts
index 50e926ab..7bfc9877 100644
--- a/src/replay/index.ts
+++ b/src/replay/index.ts
@@ -276,6 +276,7 @@ export class Replayer {
       this.service.send({ type: 'PAUSE' });
       this.service.send({ type: 'PLAY', payload: { timeOffset } });
     }
+    this.iframe.contentDocument.getElementsByTagName('html')[0].classList.remove('rrweb-paused');
     this.emitter.emit(ReplayerEvents.Start);
   }
 
@@ -287,6 +288,7 @@ export class Replayer {
       this.play(timeOffset);
       this.service.send({ type: 'PAUSE' });
     }
+    this.iframe.contentDocument.getElementsByTagName('html')[0].classList.add('rrweb-paused');
     this.emitter.emit(ReplayerEvents.Pause);
   }
 
@@ -492,6 +494,10 @@ export class Replayer {
     const injectStylesRules = getInjectStyleRules(
       this.config.blockClass,
     ).concat(this.config.insertStyleRules);
+    injectStylesRules.push('html.rrweb-paused * { animation-play-state: paused !important; }');
+    if (!this.service.state.matches('playing')) {
+      this.iframe.contentDocument.getElementsByTagName('html')[0].classList.add('rrweb-paused');
+    }
     for (let idx = 0; idx < injectStylesRules.length; idx++) {
       (styleEl.sheet! as CSSStyleSheet).insertRule(injectStylesRules[idx], idx);
     }