Description
The plugin is working pretty well, but there are a ton of extra styles are being applied. For instance, I have a <style scoped> with the following rules:
position: relative;
height: 100vh;And all of these styles are being applied inline.
background-blend-mode: normal; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: none; background-origin: padding-box; background-size: auto; border: 0px none rgba(0, 0, 0, 0.8); border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-collapse: separate; border-image-outset: 0px; border-image-repeat: stretch; border-image-slice: 100%; border-image-source: none; border-image-width: 1; border-top-left-radius: 0px; border-top-right-radius: 0px; bottom: auto; box-shadow: none; box-sizing: border-box; caption-side: top; clear: none; clip: auto; color: rgba(0, 0, 0, 0.8); cursor: auto; direction: ltr; display: block; empty-cells: show; float: none; font-family: Merriweather, serif; font-size: 18px; font-style: normal; font-variant: normal; font-weight: normal; height: 776px; image-rendering: auto; left: auto; letter-spacing: 0.1599999964237213px; line-height: 25px; list-style: disc outside none; margin: 0px 0px 72px; max-height: none; max-width: none; min-height: 0px; min-width: 600px; opacity: 1; orphans: auto; outline: rgba(0, 0, 0, 0.8) none 0px; outline-offset: 0px; overflow-wrap: break-word; overflow: visible; padding: 0px; page-break-after: auto; page-break-before: auto; page-break-inside: auto; pointer-events: auto; position: relative; resize: none; right: auto; speak: normal; table-layout: auto; tab-size: 8; text-align: start; text-decoration: none; -webkit-text-decoration-line: none; -webkit-text-decoration-style: solid; -webkit-text-decoration-color: rgba(0, 0, 0, 0.8); -webkit-text-decoration-skip: auto; -webkit-text-underline-position: auto; text-indent: 0px; text-rendering: auto; text-shadow: none; text-overflow: clip; text-transform: none; top: auto; transition: all 0s ease 0s; -webkit-transition: all 0s ease 0s; unicode-bidi: normal; vertical-align: baseline; visibility: visible; white-space: normal; widows: auto; width: 1386px; word-break: normal; word-spacing: 0px; word-wrap: break-word; z-index: auto; zoom: 1; -webkit-alt: ''; -webkit-animation: none 0s ease 0s 1 normal none; -webkit-animation-play-state: running; -webkit-appearance: none; -webkit-backface-visibility: visible; -webkit-background-clip: border-box; -webkit-background-composite: source-over; -webkit-background-origin: padding-box; -webkit-background-size: auto; mix-blend-mode: normal; isolation: auto; -webkit-border-fit: border; border-spacing: 0px; -webkit-border-image: none; -webkit-box-align: stretch; -webkit-box-decoration-break: slice; -webkit-box-direction: normal; -webkit-box-flex: 0; -webkit-box-flex-group: 1; -webkit-box-lines: single; -webkit-box-ordinal-group: 1; -webkit-box-orient: horizontal; -webkit-box-pack: start; -webkit-box-reflect: none; -webkit-box-shadow: none; -webkit-clip-path: none; -webkit-color-correction: default; -webkit-column-break-after: auto; -webkit-column-break-before: auto; -webkit-column-break-inside: auto; -webkit-column-axis: auto; -webkit-column-count: auto; -webkit-column-gap: normal; -webkit-column-progression: normal; -webkit-column-rule-color: rgba(0, 0, 0, 0.8); -webkit-column-rule-style: none; -webkit-column-rule-width: 0px; -webkit-column-span: none; -webkit-column-width: auto; -webkit-cursor-visibility: auto; -webkit-filter: none; -webkit-align-content: stretch; -webkit-align-items: stretch; -webkit-align-self: stretch; -webkit-flex: 0 1 auto; -webkit-flex-flow: row nowrap; -webkit-justify-content: flex-start; -webkit-justify-self: auto; -webkit-font-kerning: auto; -webkit-font-smoothing: antialiased; -webkit-font-variant-ligatures: normal; -webkit-hyphenate-character: auto; -webkit-hyphenate-limit-after: auto; -webkit-hyphenate-limit-before: auto; -webkit-hyphenate-limit-lines: no-limit; -webkit-hyphens: manual; -webkit-line-align: none; -webkit-line-box-contain: block inline replaced; -webkit-line-break: auto; -webkit-line-grid: none; -webkit-line-snap: none; -webkit-margin-before-collapse: collapse; -webkit-margin-after-collapse: collapse; -webkit-marquee-direction: auto; -webkit-marquee-increment: 6px; -webkit-marquee-repetition: infinite; -webkit-marquee-style: scroll; -webkit-mask-box-image: none; -webkit-mask-box-image-outset: 0px; -webkit-mask-box-image-repeat: stretch; -webkit-mask-box-image-slice: 0 fill; -webkit-mask-box-image-source: none; -webkit-mask-box-image-width: auto; -webkit-mask: none alpha 0% 0% / auto repeat border-box border-box; -webkit-mask-composite: source-over; -webkit-mask-size: auto; -webkit-mask-source-type: alpha; -webkit-nbsp-mode: normal; -webkit-order: 0; -webkit-perspective: none; -webkit-perspective-origin-x: 693px; -webkit-perspective-origin-y: 388px; -webkit-print-color-adjust: economy; -webkit-rtl-ordering: logical; -webkit-shape-outside: none; -webkit-text-combine: none; -webkit-text-decorations-in-effect: none; -webkit-text-emphasis-color: rgba(0, 0, 0, 0.8); -webkit-text-emphasis-position: over right; -webkit-text-emphasis-style: none; -webkit-text-fill-color: rgba(0, 0, 0, 0.8); -webkit-text-orientation: vertical-right; -webkit-text-security: none; -webkit-text-stroke-color: rgba(0, 0, 0, 0.8); -webkit-text-stroke-width: 0px; -webkit-transform: none; -webkit-transform-origin: 693px 388px; -webkit-transform-style: flat; -webkit-user-drag: auto; -webkit-user-modify: read-only; -webkit-user-select: text; -webkit-writing-mode: horizontal-tb; -webkit-flow-into: none; -webkit-flow-from: none; -webkit-region-break-after: auto; -webkit-region-break-before: auto; -webkit-region-break-inside: auto; -webkit-region-fragment: auto; -webkit-shape-margin: 0px; -webkit-shape-image-threshold: 0; buffered-rendering: auto; clip-path: none; clip-rule: nonzero; mask: none; filter: none; flood-color: #000000; flood-opacity: 1; lighting-color: #ffffff; stop-color: #000000; stop-opacity: 1; color-interpolation: srgb; color-interpolation-filters: linearrgb; color-rendering: auto; fill: #000000; fill-opacity: 1; fill-rule: nonzero; marker-end: none; marker-mid: none; marker-start: none; mask-type: luminance; paint-order: normal; shape-rendering: auto; stroke: none; stroke-dasharray: none; stroke-dashoffset: 0px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1px; alignment-baseline: auto; baseline-shift: baseline; dominant-baseline: auto; kerning: 0px; text-anchor: start; writing-mode: lr-tb; glyph-orientation-horizontal: 0deg; glyph-orientation-vertical: auto; -webkit-svg-shadow: none; vector-effect: none; background-position: 0% 0%; background-repeat: repeat repeat;
Lots of inline styles are also applied to descendant elements, whether they were selected by the <style scoped> or not. This happens with both Chrome and Safari, although there are differences in the rules.
I did notice that Safari doesn't seem to pick up background-attachment: fixed;. There might be other properties that are missed.