From e4bc34c5956c119f5c99cf2baf6eec5fa8852763 Mon Sep 17 00:00:00 2001
From: Dovydas Puluikis <44165418+Accir@users.noreply.github.com>
Date: Tue, 26 Dec 2023 07:41:40 +0200
Subject: [PATCH] fix: drag shadow on Safari (#587)

---
 .changeset/shaggy-planets-camp.md        | 5 +++++
 packages/core/src/events/createShadow.ts | 8 +++++---
 2 files changed, 10 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/shaggy-planets-camp.md

diff --git a/.changeset/shaggy-planets-camp.md b/.changeset/shaggy-planets-camp.md
new file mode 100644
index 000000000..525b74d56
--- /dev/null
+++ 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
index 0b62f0653..86113c69d 100644
--- 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);
   });