[Bug]: DOM node not visible in playback #1185
Description
Preflight Checklist
- I have searched the issue tracker for a bug report that matches the one I want to file, without success.
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 opposite opacity. However, when the opacity animation completes, the one with opacity:0 is removed from the DOM but the remaining node with opacity:1 is 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:717 starts to reduce in opacity to 0, and id:1624 increases from 0 to 1.
When animation is finished at index 43:
id:717is removed fromid:716id:1724is removed fromid:1626
Testcase Gist URL
Additional Information
No response