[Bug]: CSS `all: unset` incorrectly expands in `events.json` recording
otan opened this issue · comments
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
Version
v2.0.0-alpha.11
Expected Behavior
When all:unset
is set, I expect no change to my rendered webpage.
Actual Behavior
When all:unset
is encountered, the css class marks every element as unset except for those set
e.g. if we have
.class1 {
all: unset;
padding: 10px;
}
becomes this in the events.json
snapshot (making the replayer show an inaccurate screenshot):
.class1 {
color-scheme: unset;
forced-color-adjust: unset;
mask: unset;
math-depth: unset;
position: unset;
position-anchor: unset;
/* ...truncated... */
padding: 10px; // this is set
padding-inline: unset; // this is "unset", which incorrectly overwrites the above
/* ...truncated ...*/
}
which overrides padding-left
and padding-right
incorrectly compared to the original css. If the all:unset
was done in order (i.e. insert all variables as unset
, then not resort them into alphabetical order), it would've been correct.
Steps to Reproduce
Run rrweb snapshot on the following webpage, and then run it through the replayer:
<html>
<head>
<style>
.class1 {
all: unset;
padding: 4px; border: 1px solid black;
}
</style>
</head>
<body>
<div class="class1">
Hello
</div>
</body>
</html>
but the replayer shows (notice the padding + border removed):
this is because the all:unset
expands incorrectly with padding-inline: unset
overriding padding: 4px
for padding-left/padding-right
and border-inline: unset
overriding border: 1px
for border-left/right
:
Testcase Gist URL
Additional Information
No response
Diving into this a bit more, it seems it's because of the way we read cssRules
to stringifyStylesheet
.
Running document.styleSheets[0].cssRules[0].cssText
on the html
page linked above yields the same erroneous output we see above:
![image](https://private-user-images.githubusercontent.com/3646147/338586679-16c57294-4bc6-4869-baa0-331a952f1384.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAyMjkwOTIsIm5iZiI6MTcyMDIyODc5MiwicGF0aCI6Ii8zNjQ2MTQ3LzMzODU4NjY3OS0xNmM1NzI5NC00YmM2LTQ4NjktYmFhMC0zMzFhOTUyZjEzODQucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDZUMDExOTUyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZDYxODQ5NGYzMDk0MWFhNzIyOTBjNjlhMWY0ZThiOGVlODRiYTM5ZmRlN2FiMWUzNWI5ZmM1MzBmMGQ1NTU2OCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ._jKyx_qCAm-ZU6DhU7-PEPiUXd5-pUNH9JQa-FaJmwI)
which explains the results. the bug indeed only happens when rrweb records on chrome but not safari