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

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

Merged
merged 4 commits into from
Dec 4, 2024
Merged

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

merged 4 commits into from
Dec 4, 2024

Conversation

billyvg
Copy link
Member

@billyvg billyvg commented Nov 26, 2024 •
edited
Loading

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;
}

@billyvg billyvg marked this pull request as ready for review November 26, 2024 21:02
@billyvg billyvg requested a review from a team November 26, 2024 21:02
chargome
chargome approved these changes Dec 2, 2024
View reviewed changes
Copy link
Member

@chargome chargome left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

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) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need checks for !important in this function?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah good catch

@billyvg billyvg merged commit bc7d87b into sentry-v2 Dec 4, 2024
16 checks passed
@billyvg billyvg deleted the fix-snapshot-fix-all-css-property-chrome-serialization branch December 4, 2024 21:24
@billyvg billyvg mentioned this pull request Dec 5, 2024
Closed
billyvg added a commit to getsentry/sentry-javascript that referenced this pull request Dec 5, 2024
@billyvg
feat(replay): Upgrade rrweb packages to 2.30.0
7e0192d 
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 billyvg mentioned this pull request Dec 5, 2024
Merged
billyvg added a commit to getsentry/sentry-javascript that referenced this pull request Dec 6, 2024
@billyvg
feat(replay): Upgrade rrweb packages to 2.30.0 (#14597)
666e668 
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))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@chargome chargome chargome approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@billyvg @chargome