p-sw/pswui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add WebkitBackdropFilter to fi x backdrop not working in safari

Browse Source
This commit is contained in:
p-sw 2024-06-04 11:35:57 +09:00
parent c7be14429b
commit 0c67ee5c62
1 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/react/components/Drawer.tsx
View File

@ -110,6 +110,13 @@ const DrawerOverlay = forwardRef<HTMLDivElement, DrawerOverlayProps>(
} }
const Comp = asChild ? Slot : "div"; 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( return createPortal(
<Comp <Comp
@ -120,13 +127,8 @@ const DrawerOverlay = forwardRef<HTMLDivElement, DrawerOverlayProps>(
})} })}
onClick={onOutsideClick} onClick={onOutsideClick}
style={{ style={{
backdropFilter: `brightness(${ backdropFilter,
state.isDragging WebkitBackdropFilter: backdropFilter,
? state.movePercentage + DRAWER_OVERLAY_BACKDROP_FILTER_BRIGHTNESS
: state.opened
? DRAWER_OVERLAY_BACKDROP_FILTER_BRIGHTNESS
: 1
})`,
transitionDuration: state.isDragging ? "0s" : undefined, transitionDuration: state.isDragging ? "0s" : undefined,
}} }}
ref={ref} ref={ref}