diff --git a/.changeset/grumpy-ways-own.md b/.changeset/grumpy-ways-own.md new file mode 100644 index 0000000000..f34169219a --- /dev/null +++ b/.changeset/grumpy-ways-own.md @@ -0,0 +1,7 @@ +--- +'rrweb-snapshot': patch +--- + +Fix: CSS transitions are incorrectly being applied upon rebuild in Firefox. Presumably FF doesn't finished parsing the styles in time, and applies e.g. a default margin:0 to elements which have a non-zero margin set in CSS, along with a transition on them. + +Related bug report to Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1816672​ diff --git a/packages/rrweb-snapshot/src/rebuild.ts b/packages/rrweb-snapshot/src/rebuild.ts index 1582104a45..ee01fcde97 100644 --- a/packages/rrweb-snapshot/src/rebuild.ts +++ b/packages/rrweb-snapshot/src/rebuild.ts @@ -438,6 +438,28 @@ export function buildNodeWithSN( if (childN.isShadow && isElement(node) && node.shadowRoot) { node.shadowRoot.appendChild(childNode); + } else if ( + n.type === NodeType.Document && + childN.type == NodeType.Element + ) { + const htmlElement = childNode as HTMLElement; + let body: HTMLBodyElement | null = null; + htmlElement.childNodes.forEach((child) => { + if (child.nodeName === 'BODY') body = child as HTMLBodyElement; + }); + if (body) { + // this branch solves a problem in Firefox where css transitions are incorrectly + // being applied upon rebuild. Presumably FF doesn't finished parsing the styles + // in time, and applies e.g. a default margin:0 to elements which have a non-zero + // margin set in CSS, along with a transition on them + htmlElement.removeChild(body); + // append and