fix: shopify sites re-add stripped css #22942

daibhin · 2024-06-13T10:16:34Z

Problem

Multiple customers in the last two days have not been able to see their recordings because of a animation property in CSS that is not correctly parsed by rrweb (more context rrweb-io/rrweb#1322)

Changes

Could we re-add the rule manually?...

This feels a little bit on edge, I'm not sure we should be doing these one off fixes. Basically sharing to get others thoughts.
It feels relatively safe but does run the risk of altering some customers sites during playback if they have a class of the same name or have altered the CSS to run a different animation.
Given the risk is unlikely and this is essentially broken for all Shopify customers using this template it could be worth doing temporarily as the actual fix is not trivial (assets + stylesheet assets rrweb-io/rrweb#1475).

How did you test this code?

Verified that the customers content animates in to visible when this one line is added

posthog-bot · 2024-06-13T10:27:58Z

📸 UI snapshots have been updated

1 snapshot changes in total. 0 added, 1 modified, 0 deleted:

chromium: 0 added, 1 modified, 0 deleted (diff for shard 2)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

marandaneto · 2024-06-13T10:29:49Z

this is essentially broken for all Shopify customers using this template it could be worth doing temporarily as the actual fix is not trivial

feels like a one-off fix yes, but with high impact so worth it IMO.

github-actions · 2024-06-13T10:37:06Z

Size Change: 0 B

Total Size: 1.06 MB

ℹ️ View Unchanged

Filename	Size
`frontend/dist/toolbar.js`	1.06 MB

_{compressed-size-action}

posthog-bot · 2024-06-13T10:39:01Z

📸 UI snapshots have been updated

1 snapshot changes in total. 0 added, 1 modified, 0 deleted:

chromium: 0 added, 1 modified, 0 deleted (diff for shard 2)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

posthog-bot · 2024-06-13T10:50:10Z

📸 UI snapshots have been updated

1 snapshot changes in total. 0 added, 1 modified, 0 deleted:

chromium: 0 added, 1 modified, 0 deleted (diff for shard 2)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

posthog-bot · 2024-06-13T11:00:03Z

📸 UI snapshots have been updated

1 snapshot changes in total. 0 added, 1 modified, 0 deleted:

chromium: 0 added, 1 modified, 0 deleted (diff for shard 1)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

posthog-bot · 2024-06-13T11:11:01Z

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

chromium: 0 added, 2 modified, 0 deleted (diff for shard 1, diff for shard 2)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

posthog-bot · 2024-06-13T11:25:52Z

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

chromium: 0 added, 2 modified, 0 deleted (diff for shard 2)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

posthog-bot · 2024-06-13T11:36:27Z

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

chromium: 0 added, 2 modified, 0 deleted (diff for shard 2)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

posthog-bot · 2024-06-13T11:47:36Z

📸 UI snapshots have been updated

1 snapshot changes in total. 0 added, 1 modified, 0 deleted:

chromium: 0 added, 1 modified, 0 deleted (diff for shard 2)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

posthog-bot · 2024-06-13T11:58:27Z

📸 UI snapshots have been updated

1 snapshot changes in total. 0 added, 1 modified, 0 deleted:

chromium: 0 added, 1 modified, 0 deleted (diff for shard 2)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

posthog-bot · 2024-06-13T12:09:06Z

📸 UI snapshots have been updated

1 snapshot changes in total. 0 added, 1 modified, 0 deleted:

chromium: 0 added, 1 modified, 0 deleted (diff for shard 2)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

pauldambra · 2024-06-13T12:32:13Z

frontend/src/scenes/session-recordings/player/rrweb/index.ts

-    insertStyleRules: [`.ph-no-capture {   background-image: ${PLACEHOLDER_SVG_DATA_IMAGE_URL} }`],
+    insertStyleRules: [
+        `.ph-no-capture {   background-image: ${PLACEHOLDER_SVG_DATA_IMAGE_URL} }`,
+        '@media (prefers-reduced-motion: no-preference) { .scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in { animation: var(--animation-slide-in) } }',


if this fixes it then lets do it

we should have this rule in a separate variable with some explanation maybe?

const browserSpecificFixes = [] const shopifyThingyFix = 'blah browserSpecificFixes.push(shopifyThingyFix)

etc

one fix becomes two and so on 🙈

posthog-bot · 2024-06-13T14:40:54Z

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

chromium: 0 added, 2 modified, 0 deleted (diff for shard 2)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

posthog-bot · 2024-06-13T14:51:26Z

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

chromium: 0 added, 2 modified, 0 deleted (diff for shard 1)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

posthog-bot · 2024-06-13T15:02:42Z

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

chromium: 0 added, 2 modified, 0 deleted (diff for shard 1)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

fix: shopify sites readd css

5608c61

daibhin requested a review from a team June 13, 2024 10:16

Update UI snapshots for chromium (2)

f23d026

marandaneto approved these changes Jun 13, 2024

View reviewed changes

daibhin changed the title ~~fix: shopify sites readd css~~ fix: shopify sites re-add stripped css Jun 13, 2024

Update UI snapshots for chromium (2)

2969549

Update UI snapshots for chromium (2)

8d86281

Update UI snapshots for chromium (1)

09944e7

github-actions bot added 2 commits June 13, 2024 11:09

Update UI snapshots for chromium (1)

d5712fd

Update UI snapshots for chromium (2)

938a70d

Update UI snapshots for chromium (2)

b621a11

Update UI snapshots for chromium (2)

c41c1ee

Update UI snapshots for chromium (2)

3974898

Update UI snapshots for chromium (2)

41cf597

Update UI snapshots for chromium (2)

5f87142

pauldambra approved these changes Jun 13, 2024

View reviewed changes

daibhin added 2 commits June 13, 2024 15:24

Merge branch 'master' into dn-fix/shopify-sites-css-rule

d98770e

split rules

d0b18c4

Update UI snapshots for chromium (2)

52311fa

Update UI snapshots for chromium (1)

8950914

Update UI snapshots for chromium (1)

3506e39

daibhin merged commit a8ca0a7 into master Jun 13, 2024
90 checks passed

daibhin deleted the dn-fix/shopify-sites-css-rule branch June 13, 2024 15:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: shopify sites re-add stripped css #22942

fix: shopify sites re-add stripped css #22942

daibhin commented Jun 13, 2024

posthog-bot commented Jun 13, 2024

marandaneto commented Jun 13, 2024

github-actions bot commented Jun 13, 2024 •

edited

Loading

posthog-bot commented Jun 13, 2024

posthog-bot commented Jun 13, 2024

posthog-bot commented Jun 13, 2024

posthog-bot commented Jun 13, 2024

posthog-bot commented Jun 13, 2024

posthog-bot commented Jun 13, 2024

posthog-bot commented Jun 13, 2024

posthog-bot commented Jun 13, 2024

posthog-bot commented Jun 13, 2024

pauldambra Jun 13, 2024

posthog-bot commented Jun 13, 2024

posthog-bot commented Jun 13, 2024

posthog-bot commented Jun 13, 2024

fix: shopify sites re-add stripped css #22942

fix: shopify sites re-add stripped css #22942

Conversation

daibhin commented Jun 13, 2024

Problem

Changes

How did you test this code?

posthog-bot commented Jun 13, 2024

📸 UI snapshots have been updated

marandaneto commented Jun 13, 2024

github-actions bot commented Jun 13, 2024 • edited Loading

posthog-bot commented Jun 13, 2024

📸 UI snapshots have been updated

posthog-bot commented Jun 13, 2024

📸 UI snapshots have been updated

posthog-bot commented Jun 13, 2024

📸 UI snapshots have been updated

posthog-bot commented Jun 13, 2024

📸 UI snapshots have been updated

posthog-bot commented Jun 13, 2024

📸 UI snapshots have been updated

posthog-bot commented Jun 13, 2024

📸 UI snapshots have been updated

posthog-bot commented Jun 13, 2024

📸 UI snapshots have been updated

posthog-bot commented Jun 13, 2024

📸 UI snapshots have been updated

posthog-bot commented Jun 13, 2024

📸 UI snapshots have been updated

pauldambra Jun 13, 2024

Choose a reason for hiding this comment

posthog-bot commented Jun 13, 2024

📸 UI snapshots have been updated

posthog-bot commented Jun 13, 2024

📸 UI snapshots have been updated

posthog-bot commented Jun 13, 2024

📸 UI snapshots have been updated

github-actions bot commented Jun 13, 2024 •

edited

Loading