From 0c67ee5c62f4c7672bf264daaf30caae681e8d3e Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Tue, 4 Jun 2024 11:35:57 +0900
Subject: [PATCH] fix: add WebkitBackdropFilter to fi x backdrop not working in
 safari

---
 packages/react/components/Drawer.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/react/components/Drawer.tsx b/packages/react/components/Drawer.tsx
index 7a1c05b..efb4719 100644
--- a/packages/react/components/Drawer.tsx
+++ b/packages/react/components/Drawer.tsx
@@ -110,6 +110,13 @@ const DrawerOverlay = forwardRef<HTMLDivElement, DrawerOverlayProps>(
     }
 
     const Comp = asChild ? Slot : "div";
+    const backdropFilter = `brightness(${
+      state.isDragging
+        ? state.movePercentage + DRAWER_OVERLAY_BACKDROP_FILTER_BRIGHTNESS
+        : state.opened
+        ? DRAWER_OVERLAY_BACKDROP_FILTER_BRIGHTNESS
+        : 1
+    })`;
 
     return createPortal(
       <Comp
@@ -120,13 +127,8 @@ const DrawerOverlay = forwardRef<HTMLDivElement, DrawerOverlayProps>(
         })}
         onClick={onOutsideClick}
         style={{
-          backdropFilter: `brightness(${
-            state.isDragging
-              ? state.movePercentage + DRAWER_OVERLAY_BACKDROP_FILTER_BRIGHTNESS
-              : state.opened
-              ? DRAWER_OVERLAY_BACKDROP_FILTER_BRIGHTNESS
-              : 1
-          })`,
+          backdropFilter,
+          WebkitBackdropFilter: backdropFilter,
           transitionDuration: state.isDragging ? "0s" : undefined,
         }}
         ref={ref}