Ensure animations don't continue playing when we've paused playback

rrweb-io · Nov 11, 2020 · 1f946fe · 1f946fe
1 parent db5b1fe
commit 1f946fe
Showing 1 changed file with 6 additions and 0 deletions.
diff --git a/src/replay/index.ts b/src/replay/index.ts
@@ -273,6 +273,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);
   }
 
@@ -284,6 +285,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);
   }
 
@@ -489,6 +491,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);
     }