Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug]: CSS all: unset incorrectly expands in events.json recording #1505

Open
1 task done
otan opened this issue Jun 11, 2024 · 1 comment
Open
1 task done

[Bug]: CSS all: unset incorrectly expands in events.json recording #1505

otan opened this issue Jun 11, 2024 · 1 comment
Labels
bug Something isn't working

Comments

@otan
Copy link

otan commented Jun 11, 2024 •
edited
Loading

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>

it should look like this:
image

but the replayer shows (notice the padding + border removed):
image

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:
image
image
image

Testcase Gist URL

https://rrwebdebug.com/play/index.html?url=https%3A%2F%2Fgist.github.com%2Fotan%2F334b83336c7872c750bb5ef3357435fb&version=2.0.0-alpha.11&virtual-dom=on&play=on

Additional Information

No response
@otan otan added the bug Something isn't working label Jun 11, 2024
@otan otan changed the title [Bug]: all:unset incorrectly unravels [Bug]: CSS all: unset incorrectly unravels Jun 11, 2024
@otan otan changed the title [Bug]: CSS all: unset incorrectly unravels [Bug]: CSS all: unset incorrectly expands in events.json recording Jun 11, 2024
@otan
Copy link
Author

otan commented Jun 11, 2024 •
edited
Loading

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

which explains the results. the bug indeed only happens when rrweb records on chrome but not safari

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@otan