[Feature Request]: Improve the replay experience for mouse hover effects

[ababik]

Preflight Checklist

• I have searched the issue tracker for a feature request that matches the one I want to file, without success.

What package is this feature request for?

rrweb

Problem Description

I’ve been researching an issue where mouse hover effects are not being replayed.
The current implementation can patch external CSS files (by adding .\:hover classes) during the recording phase, but only under the following conditions:

1. inlineStylesheet is enabled.
2. The style file is loaded from the same origin.

If a file is loaded from a different origin, JavaScript cannot access its cssRules due to browser restrictions, so the styles cannot be patched.

I’m trying to avoid inlining styles for storage efficiency and was exploring a solution to record the style links as they are while patching the styles during the replay phase.

To work around the browser restriction on accessing cssRules, the crossorigin attribute can be added during snapshot rebuilding. For example:

<link href="https://external.styles.io/style.css">

can be rebuilt as:

<link href="https://external.styles.io/style.css" crossorigin>

This will work only if the response from https://external.styles.io/style.css includes the Access-Control-Allow-Origin header. If it does, this allows iterating over the cssRules and dynamically creating hover classes during replay.

However, this approach has limitations, as not all cross-origin style responses will include the required Access-Control-Allow-Origin header.

I’m considering adding a replay configuration option that allows specifying a list of domains for which the crossorigin attribute should be set. This way, rebuild.ts can be extended to iterate over the rules in these files and patch hover classes as needed.

Do you have any ideas on how to address this issue?
If my approach seems reasonable, I’d be happy to share a prototype I’ve created.

Proposed Solution

See the problem description.

Alternatives Considered

See the problem description.

Additional Information

No response