diff --git a/packages/rrweb-snapshot/src/rebuild.ts b/packages/rrweb-snapshot/src/rebuild.ts
index 8459c379..2bcfa8b1 100644
--- a/packages/rrweb-snapshot/src/rebuild.ts
+++ b/packages/rrweb-snapshot/src/rebuild.ts
@@ -321,6 +321,20 @@ export function buildNodeWithSN(
// close before open to make sure document was closed
doc.close();
doc.open();
+ if (n.compatMode === 'BackCompat' &&
+ (n.childNodes && n.childNodes[0].type !== NodeType.DocumentType) // there isn't one already defined
+ ) {
+ // Trigger compatMode in the iframe
+ // this is needed as document.createElement('iframe') otherwise inherits a CSS1Compat mode from the parent replayer environment
+ if (n.childNodes[0].type === NodeType.Element &&
+ 'xmlns' in n.childNodes[0].attributes &&
+ n.childNodes[0].attributes.xmlns === 'http://www.w3.org/1999/xhtml') {
+ // might as well use an xhtml doctype if we've got an xhtml namespace
+ doc.write('');
+ } else {
+ doc.write('');
+ }
+ }
node = doc;
}
diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
index 6f346e6e..ef312841 100644
--- a/packages/rrweb-snapshot/src/snapshot.ts
+++ b/packages/rrweb-snapshot/src/snapshot.ts
@@ -10,6 +10,7 @@ import {
MaskTextFn,
MaskInputFn,
KeepIframeSrcFn,
+ documentNode,
} from './types';
import { isElement, isShadowRoot, maskInputValue } from './utils';
@@ -379,11 +380,20 @@ function serializeNode(
}
switch (n.nodeType) {
case n.DOCUMENT_NODE:
- return {
- type: NodeType.Document,
- childNodes: [],
- rootId,
- };
+ if ((n as HTMLDocument).compatMode !== 'CSS1Compat') {
+ return {
+ type: NodeType.Document,
+ childNodes: [],
+ compatMode: (n as HTMLDocument).compatMode, // probably "BackCompat"
+ rootId,
+ }
+ } else {
+ return {
+ type: NodeType.Document,
+ childNodes: [],
+ rootId,
+ }
+ }
case n.DOCUMENT_TYPE_NODE:
return {
type: NodeType.DocumentType,
diff --git a/packages/rrweb-snapshot/src/types.ts b/packages/rrweb-snapshot/src/types.ts
index e482394b..8720783e 100644
--- a/packages/rrweb-snapshot/src/types.ts
+++ b/packages/rrweb-snapshot/src/types.ts
@@ -10,6 +10,7 @@ export enum NodeType {
export type documentNode = {
type: NodeType.Document;
childNodes: serializedNodeWithId[];
+ compatMode?: string;
};
export type documentTypeNode = {
diff --git a/packages/rrweb-snapshot/test/__snapshots__/integration.ts.snap b/packages/rrweb-snapshot/test/__snapshots__/integration.ts.snap
index e087f79b..bb92551c 100644
--- a/packages/rrweb-snapshot/test/__snapshots__/integration.ts.snap
+++ b/packages/rrweb-snapshot/test/__snapshots__/integration.ts.snap
@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`[html file]: about-mozilla.html 1`] = `
-"
+"
The Book of Mozilla, 11:9