From 1686fddeba189c5d585c869d4d08ea227b5d5250 Mon Sep 17 00:00:00 2001
From: gigabites19 <marsagishviligig@gmail.com>
Date: Thu, 26 Dec 2024 14:38:14 +0400
Subject: [PATCH] determine which property is being used as a background before
 caching [fixes #62]

---
 packages/vaul-vue/src/controls.ts | 30 ++++++++++++++++--------------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/packages/vaul-vue/src/controls.ts b/packages/vaul-vue/src/controls.ts
index 83adb9a..c142c89 100644
--- a/packages/vaul-vue/src/controls.ts
+++ b/packages/vaul-vue/src/controls.ts
@@ -456,10 +456,12 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
   }
 
   watchEffect(() => {
+    const wrapper = document.querySelector('[vaul-drawer-wrapper]') ?? document.body
+
     if (!isOpen.value && shouldScaleBackground.value && isClient) {
       // Can't use `onAnimationEnd` as the component will be invisible by then
       const id = setTimeout(() => {
-        reset(document.body)
+        reset(wrapper)
       }, 200)
 
       return () => clearTimeout(id)
@@ -560,25 +562,16 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
   }, { immediate: true })
 
   function scaleBackground(open: boolean) {
-    const wrapper = document.querySelector('[vaul-drawer-wrapper]')
+    const wrapper = document.querySelector<HTMLElement>('[vaul-drawer-wrapper]') ?? document.body
+    const backgroundPropertyName = wrapper.style.backgroundColor ? 'backgroundColor' : 'background'
+
     if (!wrapper || !shouldScaleBackground.value)
       return
 
     if (open) {
       // setting original styles initially
-      set(document.body, {
-        background: document.body.style.backgroundColor || document.body.style.background,
-      })
-      // setting body styles, with cache ignored, so that we can get correct original styles in reset
-      set(
-        document.body,
-        {
-          background: 'black',
-        },
-        true,
-      )
-
       set(wrapper, {
+        [backgroundPropertyName]: wrapper.style[backgroundPropertyName],
         borderRadius: `${BORDER_RADIUS}px`,
         overflow: 'hidden',
         ...(isVertical(direction.value)
@@ -594,12 +587,21 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
         transitionDuration: `${TRANSITIONS.DURATION}s`,
         transitionTimingFunction: `cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
       })
+      // setting body styles, with cache ignored, so that we can get correct original styles in reset
+      set(
+        wrapper,
+        {
+          [backgroundPropertyName]: 'black',
+        },
+        true,
+      )
     }
     else {
       // Exit
       reset(wrapper, 'overflow')
       reset(wrapper, 'transform')
       reset(wrapper, 'borderRadius')
+      reset(wrapper, backgroundPropertyName)
       set(wrapper, {
         transitionProperty: 'transform, border-radius',
         transitionDuration: `${TRANSITIONS.DURATION}s`,