From 316957830342cbcd9bb99b47df55f80e12f65830 Mon Sep 17 00:00:00 2001 From: Accir Date: Fri, 1 Dec 2023 13:02:33 +0200 Subject: [PATCH 1/2] fix: drag shadow on Safari --- .changeset/shaggy-planets-camp.md | 5 +++++ packages/core/src/events/createShadow.ts | 11 +++++++---- 2 files changed, 12 insertions(+), 4 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..37d075f52 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 = ( @@ -9,13 +8,14 @@ export const createShadow = ( if (shadowsToCreate.length === 1 || forceSingleShadow) { 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.style.background = 'white'; + shadow.classList.add('drag-shadow'); document.body.appendChild(shadow); e.dataTransfer.setDragImage(shadow, 0, 0); @@ -28,12 +28,14 @@ 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.style.background = 'white'; + container.classList.add('drag-shadow-container'); shadowsToCreate.forEach((dom) => { const { width, height, top, left } = dom.getBoundingClientRect(); @@ -44,6 +46,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); }); From 7b06159ae6f1ec1a6a2585aea551930b2ef0f92c Mon Sep 17 00:00:00 2001 From: Accir Date: Fri, 1 Dec 2023 14:04:51 +0200 Subject: [PATCH 2/2] fix: drag shadow on Safari --- packages/core/src/events/createShadow.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/core/src/events/createShadow.ts b/packages/core/src/events/createShadow.ts index 37d075f52..86113c69d 100644 --- a/packages/core/src/events/createShadow.ts +++ b/packages/core/src/events/createShadow.ts @@ -8,13 +8,13 @@ export const createShadow = ( if (shadowsToCreate.length === 1 || forceSingleShadow) { const { width, height } = shadowsToCreate[0].getBoundingClientRect(); const shadow = shadowsToCreate[0].cloneNode(true) as HTMLElement; + 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.style.background = 'white'; shadow.classList.add('drag-shadow'); document.body.appendChild(shadow); @@ -34,7 +34,6 @@ export const createShadow = ( container.style.width = '100%'; container.style.height = '100%'; container.style.pointerEvents = 'none'; - container.style.background = 'white'; container.classList.add('drag-shadow-container'); shadowsToCreate.forEach((dom) => {