[Bug]: Recording missing styles

[italoj]

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

Expected Behavior

When recording and reproducing the dom changes, the website looks like the source website, all styles are applied, and the user can replay as watching a video.

Actual Behavior

Some recordings, for the same website, look like the styles are not applied.
The users see only the HTML markups (without any styles and off)

This is a recording of the Airbnb website. Looks good and it is the expected behavior.

This is another recording, but, this time it looks off and some components do not have styles.

Testcase Gist URL

No response

Additional Information

No response

[YunFeng0817]

Thanks for the report. Could you describe what's the difference between the operations of the first and second recordings?
I can't reproduce the bug on the Airbnb website.

[italoj]

@Mark-Fenng, I've integrated the rrweb with an Electron app and it works perfectly when you do a short recording (few events). But I'm also able to reproduce using the repl command using the puppeteer.

Especially for a bit long recordings, scrolling, playing around on the website, viewing images in the carousels, etc, so, the more events the more the chance you reproduce the issue.

Steps to reproduce

1. Enter the Airbnb website

2. Scroll down the page many times

3. Click on an item on the menu (types of places), but don't click yet on the topbar menu (the one with the check-in/out dates, etc)

4. Scroll down the page many times
   Repeat the 3 and 4 steps 2-3 times.

5. Click on the topbar in the Check-in or location

[YunFeng0817]

@italoj I also encountered this problem in the web extension. I injected the rrweb into pages but the Window objects of injected code are different from web pages' Windows. So rrweb can't patch StyleSheet mutation APIs such as insertRule, deleteRule and track style changes in these websites. I make it work by injecting rrweb code into the pages as inline <script>

[italoj]

@italoj I also encountered this problem in the web extension. I injected the rrweb into pages but the Window objects of injected code are different from web pages' Windows. So rrweb can't patch StyleSheet mutation APIs such as insertRule, deleteRule and track style changes in these websites. I make it work by injecting rrweb code into the pages as inline <script>

Thank you very much @Mark-Fenng.
It was really helpful to understand the problem. 🙌

[pdwittig]

@Mark-Fenng You don't happen to have any example code / tips on how you got the inline injection to work, in say, an extension? I've been trying to make this work in an extension and can't seem to get it right.

Thank in advance.

[YunFeng0817]

@pdwittig I have a new pull request for the new implementation of the web extension. #1044
Hope this can help you

[pdwittig]

@Mark-Fenng That was super helpful to get me pointed in the right direction. Thank you!