From acffc1a1e2e238b1c71261a7a8623989a2019e31 Mon Sep 17 00:00:00 2001 From: Eoghan Murray Date: Wed, 1 Apr 2026 12:00:00 +0800 Subject: [PATCH] =?UTF-8?q?Replay=20fix=20for=20Firefox=20=E2=80=94=20add?= =?UTF-8?q?=20=20and=20=20separately=20(#1133)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Firefox fix: Allow the and to be added in two stages so that (presumably) stylesheet rules are ready to be applied when the body appears The css which triggered the bug was simply { margin-left: 220px; transition: margin-left .448s; } * Add a test case which can only be appreciated if you record against this file://, save the events to a html file, and then open the file in Firefox (without this PR applied) * Apply formatting changes * Ensure we don't apply this branch when using rrdom, where it is not necessary * Apply formatting changes * Rewrite insertion in order to be compatible with rrdom Also easier to understand * Delete transition.html * Create grumpy-ways-own.md --------- Co-authored-by: Yun Feng --- .changeset/grumpy-ways-own.md | 7 +++++++ packages/rrweb-snapshot/src/rebuild.ts | 22 ++++++++++++++++++++++ 2 files changed, 29 insertions(+) create mode 100644 .changeset/grumpy-ways-own.md diff --git a/.changeset/grumpy-ways-own.md b/.changeset/grumpy-ways-own.md new file mode 100644 index 00000000..f3416921 --- /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 1582104a..ee01fcde 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