Bug: rrweb doesn't correctly serialize values for `grid-template-areas`

[ryan953]

See also https://github.com/getsentry/team-replay/issues/382

I noticed that on my demo site i had a css class defined as:

.layout {
  display: grid;
  grid-template-areas:
    'img'
    'title'
    'desc';
  grid-template-rows: max-content;
  grid-template-columns: 1fr;
}

but when playing it back inside the replay (example replay) the css was instead:

.Media_layout__lkQuJ { display: grid; grid-template: "img" max-content / 1fr; }

^ this is the serialized css coming from the server.

Notice how the only grid-area defined is img. The other areas are automatically created, but not named, based on the definition max-content / 1fr which creates a 2 column, N row grid that gets filled in with children left-to-right, top-to-bottom.

The result is that the playback shows a different layout than what the user saw, things looking really broken inside the replay.

[bruno-garcia]

Action plan: Write a test to repro this, so we can create a ticket upstream. We can follow that with a PR to try to address this.

[vctormb]

Hello! I'm having the same problem. I'm using grid-area and the layout is totally broken on Session Replay. The image bellow shows a Replay with 4 inputs above each other. In the original layout all the 4 inputs are rearranged with grid-area.

[Lms24]

Hey @vctormb are you able to provide a minimal reproducible example? This would help us investigate and fix the problem. Thanks!

[vctormb]

Hey @vctormb are you able to provide a minimal reproducible example? This would help us investigate and fix the problem. Thanks!

Here it is a repo reproducing the issue.

[mydea]

Thank you! We'll look into this and try to fix this in rrweb.