fix: drag shadow on Safari (#587)

prevwong · Dec 26, 2023 · e4bc34c · e4bc34c
1 parent 2845ac8
commit e4bc34c
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/.changeset/shaggy-planets-camp.md b/.changeset/shaggy-planets-camp.md
@@ -0,0 +1,5 @@
+---
+'@craftjs/core': patch
+---
+
+fix Safari drag shadow
diff --git a/packages/core/src/events/createShadow.ts b/packages/core/src/events/createShadow.ts
@@ -1,4 +1,3 @@
-// TODO: this approach does not work with Safari
 // Works partially with Linux (except on Chrome)
 // We'll need an alternate way to create drag shadows
 export const createShadow = (
@@ -10,12 +9,13 @@ export const createShadow = (
     const { width, height } = shadowsToCreate[0].getBoundingClientRect();
     const shadow = shadowsToCreate[0].cloneNode(true) as HTMLElement;
 
-    shadow.style.position = `fixed`;
+    shadow.style.position = `absolute`;
     shadow.style.left = `-100%`;
     shadow.style.top = `-100%`;
     shadow.style.width = `${width}px`;
     shadow.style.height = `${height}px`;
     shadow.style.pointerEvents = 'none';
+    shadow.classList.add('drag-shadow');
 
     document.body.appendChild(shadow);
     e.dataTransfer.setDragImage(shadow, 0, 0);
@@ -28,12 +28,13 @@ export const createShadow = (
    * That container will be used as the drag shadow for the current drag event
    */
   const container = document.createElement('div');
-  container.style.position = 'fixed';
+  container.style.position = 'absolute';
   container.style.left = '-100%';
   container.style.top = `-100%`;
   container.style.width = '100%';
   container.style.height = '100%';
   container.style.pointerEvents = 'none';
+  container.classList.add('drag-shadow-container');
 
   shadowsToCreate.forEach((dom) => {
     const { width, height, top, left } = dom.getBoundingClientRect();
@@ -44,6 +45,7 @@ export const createShadow = (
     shadow.style.top = `${top}px`;
     shadow.style.width = `${width}px`;
     shadow.style.height = `${height}px`;
+    shadow.classList.add('drag-shadow');
 
     container.appendChild(shadow);
   });