Skip to content

Replay fix for Firefox — add <head> and <body> separately #1133

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Feb 22, 2023
Merged

Replay fix for Firefox — add <head> and <body> separately #1133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
fea8fed
Firefox fix: Allow the <head> and <body> to be added in two stages so…
eoghanmurray Feb 14, 2023
5c5bf28
Add a test case which can only be appreciated if you record against t…
eoghanmurray Feb 14, 2023
e01eee9
Apply formatting changes
eoghanmurray Feb 14, 2023
342f0b4
Ensure we don't apply this branch when using rrdom, where it is not n…
eoghanmurray Feb 15, 2023
181ef8a
Apply formatting changes
eoghanmurray Feb 15, 2023
06ddf13
Rewrite insertion in order to be compatible with rrdom
eoghanmurray Feb 16, 2023
99630c1
Delete transition.html
YunFeng0817 Feb 21, 2023
c7a8cd0
Create grumpy-ways-own.md
YunFeng0817 Feb 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/grumpy-ways-own.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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​
22 changes: 22 additions & 0 deletions packages/rrweb-snapshot/src/rebuild.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -437,6 +437,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 <head> and <style>s
node.appendChild(childNode);
// now append <body>
htmlElement.appendChild(body);
} else {
node.appendChild(childNode);
}
} else {
node.appendChild(childNode);
}
Expand Down