CSS stylesheet `insertRule` only works on first snapshot for `IncrementalSource.StylesheetRule`

[jay-khatri]

Hi there. We've been having issues on our recordings where on the first load/playback of a set of events, the insertRule method on the <style/> element is reflected on the DOM, but when the events up to a certain timestamp are retraced (for a pause() action, e.g.) the same changes aren't reflected.

Specifically, this seems to be happening on IncrementalSnapshot events with IncrementalSource.StyleSheetRule.

For example, for these events, if you play the recording for the first time, the styles for this input box

look fine, but if you click back to around 3:50 after playing it through, the styles are no longer there:

I'm not sure whether this is the correct way to fix it, but by simply appending rules to the textContent of the <style/> rule, rather than using insertRule, it seems to work. See here:
https://github.com/jay-khatri/rrweb/pull/1/files

@eoghanmurray @Yuyz0112 any thoughts?

[eoghanmurray]

I don't think I contributed anything to this part, but from reading your report, could you check:

• whether there are any exceptions silently caught in the case where it doesn't look right?
• whether incremental snaspshots are being applied in a different order when they are being applied in bulk?
• what indexes the succeeding insertRule inserts with vs. the failing case

I'd suspect that the rule is getting inserted but that a rule deletion event which deletes by index is incorrectly deleting the rule in the bulk case, when another rule was the intended target of the deletion.

[Juice10]

I think this is related to this issue/PR: #529

[jay-khatri]

Thanks @Juice10 looks like it!