fix: disable box-shadow rendering on ios/safari (#634)

* disable box-shadow rendering on ios/safari * Create chilly-elephants-retire.md
riccardoperra · May 18, 2024 · 7f715bd · 7f715bd
1 parent 96e1ba5
commit 7f715bd
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/.changeset/chilly-elephants-retire.md b/.changeset/chilly-elephants-retire.md
@@ -0,0 +1,5 @@
+---
+"@codeimage/dom-export": patch
+---
+
+fix: disable box-shadow rendering on ios/safari
diff --git a/packages/dom-export/src/lib/cloneNode.ts b/packages/dom-export/src/lib/cloneNode.ts
@@ -1,4 +1,4 @@
-import {isIOS} from '@solid-primitives/platform';
+import {isIOS, isSafari} from '@solid-primitives/platform';
 import {clonePseudoElements} from './clonePseudoElements';
 import {copyFont, copyUserComputedStyleFast} from './cloneStyle';
 import {getBlobFromURL} from './getBlobFromURL';
@@ -119,7 +119,7 @@ function cloneCSSStyle<T extends HTMLElement>(
   }
 
   const boxShadow = sourceStyle.getPropertyValue('boxShadow');
-  if (boxShadow !== 'none' && isIOS) {
+  if (boxShadow !== 'none' && (isIOS || isSafari)) {
     clonedNode.setAttribute(
       'style',
       `${clonedNode.getAttribute('style')};box-shadow:none!important;`,

diff --git a/packages/dom-export/src/lib/clonePseudoElements.ts b/packages/dom-export/src/lib/clonePseudoElements.ts
@@ -1,3 +1,4 @@
+import {isIOS, isSafari} from '@solid-primitives/platform';
 import {toArray, uuid} from './util';
 
 type Pseudo = ':before' | ':after';
@@ -24,6 +25,9 @@ function getPseudoElementStyle(
   style: CSSStyleDeclaration,
 ): Text {
   const selector = `.${className}:${pseudo}`;
+  if (isIOS || isSafari) {
+    style.boxShadow = 'unset';
+  }
   const cssText = style.cssText
     ? formatCSSText(style)
     : formatCSSProperties(style);