fix: Safari drag issue (#46)

huntabyte · Feb 3, 2024 · 0e0c772 · 0e0c772
1 parent 9856873
commit 0e0c772
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git a/.changeset/few-dingos-sit.md b/.changeset/few-dingos-sit.md
@@ -0,0 +1,5 @@
+---
+"vaul-svelte": patch
+---
+
+fix bug preventing drawer from dragging on Safari
diff --git a/src/lib/internal/vaul.ts b/src/lib/internal/vaul.ts
@@ -916,10 +916,30 @@ function getDistanceMoved(
 	direction: DrawerDirection,
 	event: SvelteEvent<PointerEvent | MouseEvent | TouchEvent, HTMLElement>
 ) {
-	const screenY = event instanceof TouchEvent ? event.changedTouches[0].screenY : event.screenY;
-	const screenX = event instanceof TouchEvent ? event.changedTouches[0].screenX : event.screenX;
+	if (event.type.startsWith("touch")) {
+		return getDistanceMovedForTouch(pointerStart, direction, event as TouchEvent);
+	} else {
+		return getDistanceMovedForPointer(pointerStart, direction, event as PointerEvent);
+	}
+}
 
-	return pointerStart - (isVertical(direction) ? screenY : screenX);
+function getDistanceMovedForPointer(
+	pointerStart: number,
+	direction: DrawerDirection,
+	event: PointerEvent | MouseEvent
+) {
+	return pointerStart - (isVertical(direction) ? event.screenY : event.screenX);
+}
+
+function getDistanceMovedForTouch(
+	pointerStart: number,
+	direction: DrawerDirection,
+	event: TouchEvent
+) {
+	return (
+		pointerStart -
+		(isVertical(direction) ? event.changedTouches[0].screenY : event.changedTouches[0].screenX)
+	);
 }
 
 function getDirectionMultiplier(direction: DrawerDirection) {