[Bug]: DOM node not visible in playback #1185
Comments
|
Experience the same problem using v2.0.0-alpha.0 and later |
|
I'm not able to reproduce my problem anymore using recent v2.0.0-alpha.7 |
|
@ababik Unfortunately problem still exists in v2.0.0-alpha.7 |
|
I am seeing this in v2.0.0-alpha8 |
|
@billyvg It is caused by the style lost in shadow-root, and the style is even not in the mutation event(
There are probably two reasons to cause that
considering the first reason, I wrote a Web Components Demo, it works for me: <html>
<body>
<button id="start">start</button>
<button id="stop">stop</button>
<text-msg id="e1"></text-msg>
<template id="textMsg">
<style>
:host {
color: red;
}
</style>
<p>p-tag</p>
</template>
<script src="https://cdn.jsdelivr.net/npm/rrweb@2.0.0-alpha.8/dist/rrweb.min.js"></script>
<script>
const startBtn = document.getElementById('start');
const stopBtn = document.getElementById('stop');
const e1 = document.getElementById('e1');
const events = [];
startBtn.addEventListener('click', () => {
const e2 = e1.cloneNode(true);
document.body.append(e2);
});
stopBtn.addEventListener('click', () => {
stopRecord();
console.log(events);
});
class TextMsg extends HTMLElement {
constructor() {
super();
let shadow = this.attachShadow({ mode: 'open' });
let templateElem = document.getElementById('textMsg');
let content = templateElem.content.cloneNode(true);
shadow.appendChild(content);
this.append('test')
}
}
window.customElements.define('text-msg', TextMsg);
let stopRecord = rrweb.record({
slimDOMOptions: true,
sampling: {
mouseInteraction: false,
mousemove: false,
},
emit(event) {
events.push(event);
},
});
</script>
</body>
</html>could you please provide a minimum code to show how such events occurred to help us to locate this bug? |
|
Any updates about this issue? |
|
It seems that fullsnapshot works correctly when complete DOM is created. If fullspanshot is created before DOM being completed, mutations incorrectly detect changes and replay is broken |
|
Facing same issue |
Preflight Checklist
What package is this bug report for?
rrweb-player
Version
v2
Expected Behavior
DOM node should be visible in the playback.
Actual Behavior
DOM node is not visible in playback
Steps to Reproduce
Note that I am using a browser extension to inject the recording snippet and this only happens when the DOM nodes are captured as a mutation. If the page is loaded before recording starts and the nodes are captured as a full snapshot, they will display fine. I have also seen similar behavior with iframes as well.
If you are viewing the debug player, at around 4 seconds you'll see that the sidebar on the right hand side starts to fade away. If you inspect the DOM you'll see that we actually have duplicate nodes (
$$('.cDVwyD > div')) that have oppositeopacity. However, when the opacity animation completes, the one withopacity:0is removed from the DOM but the remaining node withopacity:1is not visible in the player. If you duplicate the DOM node, you'll see that it renders fine.If you are debugging the events json, index 4 with timestamp = 1679436143262 is when we add the new nodes of interest.
At index 5, we see that node
id:717starts to reduce in opacity to 0, andid:1624increases from 0 to 1.When animation is finished at index 43:
id:717is removed fromid:716id:1724is removed fromid:1626Testcase Gist URL
https://rrwebdebug.com/play/index.html?url=https%3A%2F%2Fgist.github.com%2Fbillyvg%2Ffb20412bb99cb1dc2add85c571816caf&version=1.0.0-alpha.4&play=on
Additional Information
No response
The text was updated successfully, but these errors were encountered: