diff --git a/packages/daisyui/src/base/rootcolor.css b/packages/daisyui/src/base/rootcolor.css
index bb04d2ee211..95acd013a44 100644
--- a/packages/daisyui/src/base/rootcolor.css
+++ b/packages/daisyui/src/base/rootcolor.css
@@ -1,9 +1,13 @@
 :root,
 [data-theme] {
-  background: var(--page-scroll-bg, var(--root-bg));
+  background-color: var(--root-bg);
   color: var(--color-base-content);
 }
 
+:root {
+  background-color: var(--page-scroll-bg, var(--root-bg));
+}
+
 :where(:root, [data-theme]) {
   --root-bg: var(--color-base-100);
 }
diff --git a/packages/daisyui/src/base/rootscrollgutter.css b/packages/daisyui/src/base/rootscrollgutter.css
index ac0cd9f5dcb..0285025cf16 100644
--- a/packages/daisyui/src/base/rootscrollgutter.css
+++ b/packages/daisyui/src/base/rootscrollgutter.css
@@ -1,21 +1,21 @@
 :root {
-  background: var(--page-scroll-bg, var(--root-bg));
-  --page-scroll-bg-on: linear-gradient(var(--root-bg, #0000), var(--root-bg, #0000))
+  --page-has-backdrop: var(--page-scroll-lock) 1;
+  --page-scroll-bg: var(--page-scroll-lock)
     color-mix(in srgb, var(--root-bg, #0000), oklch(0% 0 0) calc(var(--page-has-backdrop, 0) * 40%));
-  --page-scroll-transition-on: background-color 0.3s ease-out;
+  background-image: var(--page-scroll-lock)
+    linear-gradient(var(--root-bg, #0000), var(--root-bg, #0000));
 
-  transition: var(--page-scroll-transition);
+  transition: var(--page-scroll-lock) background-color 0.3s ease-out;
+  animation: var(--page-scroll-lock) set-page-has-scroll forwards;
+  animation-timeline: var(--page-scroll-lock) scroll();
 
-  /* CSS if is not supported */
-  scrollbar-gutter: var(--page-scroll-gutter, unset);
-
-  /* CSS if is supported */
-  scrollbar-gutter: if(style(--page-has-scroll: 1): var(--page-scroll-gutter, unset) ; else: unset);
+  --page-has-scroll: initial;
+  scrollbar-gutter: var(--page-has-scroll) var(--page-scroll-lock) stable;
 }
 
 @keyframes set-page-has-scroll {
   0%,
   to {
-    --page-has-scroll: 1;
+    --page-has-scroll: ;
   }
 }
diff --git a/packages/daisyui/src/base/rootscrolllock.css b/packages/daisyui/src/base/rootscrolllock.css
index 094fbd81414..d7c0618ca13 100644
--- a/packages/daisyui/src/base/rootscrolllock.css
+++ b/packages/daisyui/src/base/rootscrolllock.css
@@ -1,3 +1,8 @@
+:root {
+  --page-scroll-lock: initial;
+  --page-overflow: var(--page-scroll-lock) hidden;
+}
+
 /* force higher specificity */
 :root:not(span) {
   overflow: var(--page-overflow);
diff --git a/packages/daisyui/src/components/drawer.css b/packages/daisyui/src/components/drawer.css
index 3137903d141..b92a54465ed 100644
--- a/packages/daisyui/src/components/drawer.css
+++ b/packages/daisyui/src/components/drawer.css
@@ -59,13 +59,7 @@
     }
 
     :where(:root:has(&:checked)) {
-      --page-has-backdrop: 1;
-      --page-overflow: hidden;
-      --page-scroll-bg: var(--page-scroll-bg-on);
-      --page-scroll-gutter: stable;
-      --page-scroll-transition: var(--page-scroll-transition-on);
-      animation: set-page-has-scroll forwards;
-      animation-timeline: scroll();
+      --page-scroll-lock: ;
     }
   }
 
@@ -121,13 +115,7 @@
       }
 
       :root:has(&) {
-        --page-overflow: revert-layer;
-        --page-scroll-gutter: revert-layer;
-        --page-scroll-bg: revert-layer;
-        --page-scroll-transition: revert-layer;
-        --page-has-backdrop: revert-layer;
-        animation: revert-layer;
-        animation-timeline: revert-layer;
+        --page-scroll-lock: revert-layer;
       }
     }
   }
diff --git a/packages/daisyui/src/components/modal.css b/packages/daisyui/src/components/modal.css
index 76cd59cf5c2..32f70b67bed 100644
--- a/packages/daisyui/src/components/modal.css
+++ b/packages/daisyui/src/components/modal.css
@@ -34,13 +34,7 @@
       }
 
       :root:has(&) {
-        --page-has-backdrop: 1;
-        --page-overflow: hidden;
-        --page-scroll-bg: var(--page-scroll-bg-on);
-        --page-scroll-gutter: stable;
-        --page-scroll-transition: var(--page-scroll-transition-on);
-        animation: set-page-has-scroll forwards;
-        animation-timeline: scroll();
+        --page-scroll-lock: ;
       }
     }