fix(snapshot): Fix CSS expansion of `add` CSS property by billyvg · Pull Request #223 · getsentry/rrweb

billyvg · 2024-11-26T20:44:02Z

Adds a workaround for this Chrome bug where the CSS property all gets expanded by Chrome and can potentially override user defined CSS.

Ref https://github.com/getsentry/team-replay/issues/504

Example

CSS as defined by user

.btn {
  all: unset;
  padding: 10px 15px;
}

After Chrome serialization

.btn {
  color: unset;
  font: unset;
  font-palette: unset;
  font-synthesis: unset;
  forced-color-adjust: unset;
  text-orientation: unset;
  text-rendering: unset;
  -webkit-font-smoothing: unset;
  -webkit-locale: unset;
  -webkit-text-orientation: unset;
  -webkit-writing-mode: unset;
  writing-mode: unset;
  zoom: unset;
  accent-color: unset;
  place-content: unset;
  place-items: unset;
  place-self: unset;
  alignment-baseline: unset;
  animation-composition: unset;
  animation: unset;
  app-region: unset;
  appearance: unset;
  aspect-ratio: unset;
  backdrop-filter: unset;
  backface-visibility: unset;
  background: unset;
  background-blend-mode: unset;
  baseline-shift: unset;
  baseline-source: unset;
  block-size: unset;
  border-block: unset;
  border: unset;
  border-radius: unset;
  border-collapse: unset;
  border-end-end-radius: unset;
  border-end-start-radius: unset;
  border-inline: unset;
  border-start-end-radius: unset;
  border-start-start-radius: unset;
  inset: unset;
  box-shadow: unset;
  box-sizing: unset;
  break-after: unset;
  break-before: unset;
  break-inside: unset;
  buffered-rendering: unset;
  caption-side: unset;
  caret-color: unset;
  clear: unset;
  clip: unset;
  clip-path: unset;
  clip-rule: unset;
  color-interpolation: unset;
  color-interpolation-filters: unset;
  color-rendering: unset;
  color-scheme: unset;
  columns: unset;
  column-fill: unset;
  gap: unset;
  column-rule: unset;
  column-span: unset;
  contain: unset;
  contain-intrinsic-block-size: unset;
  contain-intrinsic-size: unset;
  contain-intrinsic-inline-size: unset;
  container: unset;
  content: unset;
  content-visibility: unset;
  counter-increment: unset;
  counter-reset: unset;
  counter-set: unset;
  cursor: unset;
  cx: unset;
  cy: unset;
  d: unset;
  display: unset;
  dominant-baseline: unset;
  empty-cells: unset;
  fill: unset;
  fill-opacity: unset;
  fill-rule: unset;
  filter: unset;
  flex: unset;
  flex-flow: unset;
  float: unset;
  flood-color: unset;
  flood-opacity: unset;
  grid: unset;
  grid-area: unset;
  height: unset;
  hyphenate-character: unset;
  hyphenate-limit-chars: unset;
  hyphens: unset;
  image-orientation: unset;
  image-rendering: unset;
  initial-letter: unset;
  inline-size: unset;
  inset-block: unset;
  inset-inline: unset;
  isolation: unset;
  letter-spacing: unset;
  lighting-color: unset;
  line-break: unset;
  list-style: unset;
  margin-block: unset;
  margin: unset;
  margin-inline: unset;
  marker: unset;
  mask: unset;
  mask-type: unset;
  math-depth: unset;
  math-shift: unset;
  math-style: unset;
  max-block-size: unset;
  max-height: unset;
  max-inline-size: unset;
  max-width: unset;
  min-block-size: unset;
  min-height: unset;
  min-inline-size: unset;
  min-width: unset;
  mix-blend-mode: unset;
  object-fit: unset;
  object-position: unset;
  object-view-box: unset;
  offset: unset;
  opacity: unset;
  order: unset;
  orphans: unset;
  outline: unset;
  outline-offset: unset;
  overflow-anchor: unset;
  overflow-clip-margin: unset;
  overflow-wrap: unset;
  overflow: unset;
  overscroll-behavior-block: unset;
  overscroll-behavior-inline: unset;
  overscroll-behavior: unset;
  padding-block: unset;
  padding: 10px 15px;
  padding-inline: unset;
  page: unset;
  page-orientation: unset;
  paint-order: unset;
  perspective: unset;
  perspective-origin: unset;
  pointer-events: unset;
  position: unset;
  quotes: unset;
  r: unset;
  resize: unset;
  rotate: unset;
  ruby-position: unset;
  rx: unset;
  ry: unset;
  scale: unset;
  scroll-behavior: unset;
  scroll-margin-block: unset;
  scroll-margin: unset;
  scroll-margin-inline: unset;
  scroll-padding-block: unset;
  scroll-padding: unset;
  scroll-padding-inline: unset;
  scroll-snap-align: unset;
  scroll-snap-stop: unset;
  scroll-snap-type: unset;
  scroll-timeline: unset;
  scrollbar-gutter: unset;
  shape-image-threshold: unset;
  shape-margin: unset;
  shape-outside: unset;
  shape-rendering: unset;
  size: unset;
  speak: unset;
  stop-color: unset;
  stop-opacity: unset;
  stroke: unset;
  stroke-dasharray: unset;
  stroke-dashoffset: unset;
  stroke-linecap: unset;
  stroke-linejoin: unset;
  stroke-miterlimit: unset;
  stroke-opacity: unset;
  stroke-width: unset;
  tab-size: unset;
  table-layout: unset;
  text-align: unset;
  text-align-last: unset;
  text-anchor: unset;
  text-combine-upright: unset;
  text-decoration: unset;
  text-decoration-skip-ink: unset;
  text-emphasis: unset;
  text-emphasis-position: unset;
  text-indent: unset;
  text-overflow: unset;
  text-shadow: unset;
  text-size-adjust: unset;
  text-transform: unset;
  text-underline-offset: unset;
  text-underline-position: unset;
  white-space: unset;
  touch-action: unset;
  transform: unset;
  transform-box: unset;
  transform-origin: unset;
  transform-style: unset;
  transition: unset;
  translate: unset;
  user-select: unset;
  vector-effect: unset;
  vertical-align: unset;
  view-timeline: unset;
  view-timeline-inset: unset;
  view-transition-name: unset;
  visibility: unset;
  border-spacing: unset;
  -webkit-box-align: unset;
  -webkit-box-decoration-break: unset;
  -webkit-box-direction: unset;
  -webkit-box-flex: unset;
  -webkit-box-ordinal-group: unset;
  -webkit-box-orient: unset;
  -webkit-box-pack: unset;
  -webkit-box-reflect: unset;
  -webkit-highlight: unset;
  -webkit-line-break: unset;
  -webkit-line-clamp: unset;
  -webkit-mask-box-image: unset;
  -webkit-mask: unset;
  -webkit-mask-composite: unset;
  -webkit-print-color-adjust: unset;
  -webkit-rtl-ordering: unset;
  -webkit-ruby-position: unset;
  -webkit-tap-highlight-color: unset;
  -webkit-text-combine: unset;
  -webkit-text-decorations-in-effect: unset;
  -webkit-text-fill-color: unset;
  -webkit-text-security: unset;
  -webkit-text-stroke: unset;
  -webkit-user-drag: unset;
  -webkit-user-modify: unset;
  widows: unset;
  width: unset;
  will-change: unset;
  word-break: unset;
  word-spacing: unset;
  x: unset;
  y: unset;
  z-index: unset;
}

After fix

.btn {
  all:unset;
  padding-top:10px;
  padding-right:15px;
  padding-bottom:10px;
  padding-left:15px;
}

chargome

LGTM

chargome · 2024-12-02T16:44:44Z

packages/rrweb-snapshot/src/utils.ts

+ * There is a bug in chrome (https://issues.chromium.org/issues/41416124) with the `all` property where we can't use `cssText` because it is wrong.
+ * Instead, attempt to serialize the css string using `CSSStyleDeclaration`.
+ */
+export function fixAllCssProperty(rule: CSSStyleRule) {


Do we need checks for !important in this function?

Yeah good catch

Includes the following fixes: - fix: Catch calls to iframe content document ([#222](getsentry/rrweb#222)) - fix(snapshot): Fix CSS expansion of add CSS property ([#223](getsentry/rrweb#223))

billyvg added 3 commits November 26, 2024 15:43

fix(snapshot): Fix CSS expansion of add CSS property

3ac4c1e

add comment

fbaaa85

remove only

2f3752d

billyvg marked this pull request as ready for review November 26, 2024 21:02

billyvg requested a review from a team November 26, 2024 21:02

chargome approved these changes Dec 2, 2024

View reviewed changes

add fix for !important

2ae0b89

billyvg merged commit bc7d87b into sentry-v2 Dec 4, 2024

billyvg deleted the fix-snapshot-fix-all-css-property-chrome-serialization branch December 4, 2024 21:24

billyvg mentioned this pull request Dec 5, 2024

CSS rule all incorrectly expands in Chrome and can overwrite styles getsentry/sentry-javascript#14596

Closed

billyvg mentioned this pull request Dec 5, 2024

feat(replay): Upgrade rrweb packages to 2.30.0 getsentry/sentry-javascript#14597

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(snapshot): Fix CSS expansion of `add` CSS property#223

fix(snapshot): Fix CSS expansion of `add` CSS property#223
billyvg merged 4 commits intosentry-v2from
fix-snapshot-fix-all-css-property-chrome-serialization

billyvg commented Nov 26, 2024 •

edited

Loading

Uh oh!

chargome left a comment

Uh oh!

chargome Dec 2, 2024

Uh oh!

billyvg Dec 4, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

billyvg commented Nov 26, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Example

CSS as defined by user

After Chrome serialization

After fix

Uh oh!

chargome left a comment

Choose a reason for hiding this comment

Uh oh!

chargome Dec 2, 2024

Choose a reason for hiding this comment

Uh oh!

billyvg Dec 4, 2024

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

billyvg commented Nov 26, 2024 •

edited

Loading