diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css b/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
index 1690fa86d9d..552bc0df8a4 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
@@ -72,7 +72,6 @@
 
 .Backdrop {
   position: fixed;
-  min-height: 100dvh;
   inset: 0;
   background-color: black;
   opacity: 0.2;
@@ -81,6 +80,7 @@
   /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
   @supports (-webkit-touch-callout: none) {
     position: absolute;
+    min-height: 100dvh;
   }
 
   @media (prefers-color-scheme: dark) {
@@ -103,7 +103,7 @@
   left: 50%;
   transform: translate(-50%, -50%);
   width: 24rem;
-  max-width: calc(100vw - 3rem);
+  max-width: calc(100% - 3rem);
   margin-top: -2rem;
   padding: 1rem;
   border: 1px solid oklch(14.5% 0 0deg);
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
index fa0210be608..df5946f2de4 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -70,8 +70,8 @@ export default function AlertDialogDetachedTriggersControlledDemo() {
       >
         {({ payload }) => (
           <AlertDialog.Portal>
-            <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-            <AlertDialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
+            <AlertDialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute supports-[-webkit-touch-callout:none]:min-h-dvh" />
+            <AlertDialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100%-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
               <div className="flex flex-col gap-1">
                 <AlertDialog.Title className="text-base font-bold">
                   {payload?.message ?? 'Are you sure?'}
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
index b863dcec53b..4c07cd00167 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
@@ -18,8 +18,8 @@ export default function AlertDialogDetachedTriggersSimpleDemo() {
 
       <AlertDialog.Root handle={demoAlertDialog}>
         <AlertDialog.Portal>
-          <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-          <AlertDialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
+          <AlertDialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute supports-[-webkit-touch-callout:none]:min-h-dvh" />
+          <AlertDialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100%-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
             <div className="flex flex-col gap-1">
               <AlertDialog.Title className="text-base font-bold">Discard draft?</AlertDialog.Title>
               <AlertDialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
index 7f0b579b063..f71007183e7 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
@@ -72,7 +72,6 @@
 
 .Backdrop {
   position: fixed;
-  min-height: 100dvh;
   inset: 0;
   background-color: black;
   opacity: 0.2;
@@ -81,6 +80,7 @@
   /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
   @supports (-webkit-touch-callout: none) {
     position: absolute;
+    min-height: 100dvh;
   }
 
   @media (prefers-color-scheme: dark) {
@@ -103,7 +103,7 @@
   left: 50%;
   transform: translate(-50%, -50%);
   width: 24rem;
-  max-width: calc(100vw - 3rem);
+  max-width: calc(100% - 3rem);
   margin-top: -2rem;
   padding: 1rem;
   border: 1px solid oklch(14.5% 0 0deg);
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
index cbb9dc6808d..d22f01406f2 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
@@ -10,8 +10,8 @@ export default function ExampleAlertDialog() {
     <AlertDialog.Root>
       <AlertDialog.Trigger className={dangerButtonClasses}>Discard draft</AlertDialog.Trigger>
       <AlertDialog.Portal>
-        <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-        <AlertDialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
+        <AlertDialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute supports-[-webkit-touch-callout:none]:min-h-dvh" />
+        <AlertDialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100%-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
           <div className="flex flex-col gap-1">
             <AlertDialog.Title className="text-base font-bold">Discard draft?</AlertDialog.Title>
             <AlertDialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/open-from-menu/css-modules/index.module.css b/docs/src/app/(docs)/react/components/alert-dialog/demos/open-from-menu/css-modules/index.module.css
index 9ce135eeab8..a72850288be 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/open-from-menu/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/open-from-menu/css-modules/index.module.css
@@ -149,7 +149,6 @@
 
 .Backdrop {
   position: fixed;
-  min-height: 100dvh;
   inset: 0;
   background-color: black;
   opacity: 0.2;
@@ -158,6 +157,7 @@
   /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
   @supports (-webkit-touch-callout: none) {
     position: absolute;
+    min-height: 100dvh;
   }
 
   @media (prefers-color-scheme: dark) {
@@ -180,7 +180,7 @@
   left: 50%;
   transform: translate(-50%, -50%);
   width: 24rem;
-  max-width: calc(100vw - 3rem);
+  max-width: calc(100% - 3rem);
   margin-top: -2rem;
   padding: 1rem;
   border: 1px solid oklch(14.5% 0 0deg);
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/open-from-menu/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/open-from-menu/tailwind/index.tsx
index 6f4f10c902a..bd65dbb098f 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/open-from-menu/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/open-from-menu/tailwind/index.tsx
@@ -30,8 +30,8 @@ export default function ExampleAlertDialog() {
       {/* Control the alert dialog state */}
       <AlertDialog.Root open={dialogOpen} onOpenChange={setDialogOpen}>
         <AlertDialog.Portal>
-          <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-          <AlertDialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
+          <AlertDialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute supports-[-webkit-touch-callout:none]:min-h-dvh" />
+          <AlertDialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100%-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
             <div className="flex flex-col gap-1">
               <AlertDialog.Title className="text-base font-bold">
                 Delete playlist?
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
index fcf40ce3f9b..c6cfd6c6927 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
@@ -64,7 +64,6 @@
 
 .Backdrop {
   position: fixed;
-  min-height: 100dvh;
   inset: 0;
   background-color: black;
   opacity: 0.2;
@@ -73,6 +72,7 @@
   /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
   @supports (-webkit-touch-callout: none) {
     position: absolute;
+    min-height: 100dvh;
   }
 
   @media (prefers-color-scheme: dark) {
@@ -95,7 +95,7 @@
   left: 50%;
   transform: translate(-50%, -50%);
   width: 24rem;
-  max-width: calc(100vw - 3rem);
+  max-width: calc(100% - 3rem);
   margin-top: -2rem;
   padding: 1rem;
   border: 1px solid oklch(14.5% 0 0deg);
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
index d63e34239c8..847c8c86438 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -63,8 +63,8 @@ export default function DialogDetachedTriggersControlledDemo() {
       >
         {({ payload }) => (
           <Dialog.Portal>
-            <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-            <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
+            <Dialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute supports-[-webkit-touch-callout:none]:min-h-dvh" />
+            <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100%-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
               {payload !== undefined && (
                 <Dialog.Title className="text-base font-bold">Dialog {payload}</Dialog.Title>
               )}
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
index f4244f56321..f0d03eae6c7 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
@@ -16,8 +16,8 @@ export default function DialogDetachedTriggersSimpleDemo() {
 
       <Dialog.Root handle={demoDialog}>
         <Dialog.Portal>
-          <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-          <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
+          <Dialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute supports-[-webkit-touch-callout:none]:min-h-dvh" />
+          <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100%-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
             <div className="flex flex-col gap-1">
               <Dialog.Title className="text-base font-bold">Notifications</Dialog.Title>
               <Dialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/focus-management/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/focus-management/css-modules/index.module.css
index 41a67fe1428..087d0f267c6 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/focus-management/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/focus-management/css-modules/index.module.css
@@ -71,7 +71,6 @@
 
 .Backdrop {
   position: fixed;
-  min-height: 100dvh;
   inset: 0;
   background-color: black;
   opacity: 0.2;
@@ -80,6 +79,7 @@
   /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
   @supports (-webkit-touch-callout: none) {
     position: absolute;
+    min-height: 100dvh;
   }
 
   @media (prefers-color-scheme: dark) {
@@ -102,7 +102,7 @@
   left: 50%;
   transform: translate(-50%, -50%);
   width: 24rem;
-  max-width: calc(100vw - 3rem);
+  max-width: calc(100% - 3rem);
   margin-top: -2rem;
   padding: 1rem;
   border: 1px solid oklch(14.5% 0 0deg);
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/focus-management/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/focus-management/tailwind/index.tsx
index f0ecffc33f5..96b18f7aaa3 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/focus-management/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/focus-management/tailwind/index.tsx
@@ -15,11 +15,11 @@ export default function ExampleDialog() {
           Open feedback
         </Dialog.Trigger>
         <Dialog.Portal>
-          <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
+          <Dialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute supports-[-webkit-touch-callout:none]:min-h-dvh" />
           <Dialog.Popup
             initialFocus={initialFocusRef}
             finalFocus={finalFocusRef}
-            className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0"
+            className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100%-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0"
           >
             <div className="flex flex-col gap-1">
               <Dialog.Title className="text-base font-bold">Feedback form</Dialog.Title>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
index f5faa6ac8c3..96433615283 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
@@ -64,7 +64,6 @@
 
 .Backdrop {
   position: fixed;
-  min-height: 100dvh;
   inset: 0;
   background-color: black;
   opacity: 0.2;
@@ -73,6 +72,7 @@
   /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
   @supports (-webkit-touch-callout: none) {
     position: absolute;
+    min-height: 100dvh;
   }
 
   @media (prefers-color-scheme: dark) {
@@ -95,7 +95,7 @@
   left: 50%;
   transform: translate(-50%, -50%);
   width: 24rem;
-  max-width: calc(100vw - 3rem);
+  max-width: calc(100% - 3rem);
   margin-top: -2rem;
   padding: 1rem;
   border: 1px solid oklch(14.5% 0 0deg);
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
index 270515cdb9b..f1274141122 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
@@ -7,8 +7,8 @@ export default function ExampleDialog() {
         View notifications
       </Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-        <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
+        <Dialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute supports-[-webkit-touch-callout:none]:min-h-dvh" />
+        <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100%-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
           <div className="flex flex-col gap-1">
             <Dialog.Title className="text-base font-bold">Notifications</Dialog.Title>
             <Dialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
index f93428ed363..81ec4d01632 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
@@ -102,7 +102,7 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  width: min(40rem, calc(100vw - 2rem));
+  width: min(40rem, calc(100% - 2rem));
   max-height: 100%;
   max-width: 100%;
   border: 1px solid oklch(14.5% 0 0deg);
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
index 6b6d036d71f..60cf62b57b2 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
@@ -10,7 +10,7 @@ export default function InsideScrollDialog() {
       <Dialog.Portal>
         <Dialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-opacity duration-150 data-starting-style:opacity-0 data-ending-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
         <Dialog.Viewport className="fixed inset-0 flex items-center justify-center overflow-hidden py-6 [@media(min-height:600px)]:pb-12 [@media(min-height:600px)]:pt-8">
-          <Dialog.Popup className="relative flex w-[min(40rem,calc(100vw-2rem))] max-h-full max-w-full min-h-0 flex-col bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-starting-style:scale-[0.98] data-starting-style:opacity-0 data-ending-style:scale-[0.98] data-ending-style:opacity-0">
+          <Dialog.Popup className="relative flex w-[min(40rem,calc(100%-2rem))] max-h-full max-w-full min-h-0 flex-col bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-starting-style:scale-[0.98] data-starting-style:opacity-0 data-ending-style:scale-[0.98] data-ending-style:opacity-0">
             <div className="flex flex-col gap-1 p-4 border-b border-neutral-950 dark:border-white">
               <Dialog.Title className="text-base font-bold">Dialog</Dialog.Title>
               <Dialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
index 6bf6211f20a..a59838bd311 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
@@ -107,7 +107,6 @@
 
 .Backdrop {
   position: fixed;
-  min-height: 100dvh;
   inset: 0;
   background-color: black;
   opacity: 0.2;
@@ -116,6 +115,7 @@
   /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
   @supports (-webkit-touch-callout: none) {
     position: absolute;
+    min-height: 100dvh;
   }
 
   @media (prefers-color-scheme: dark) {
@@ -137,7 +137,7 @@
   flex-direction: column;
   gap: 1rem;
   width: 24rem;
-  max-width: calc(100vw - 3rem);
+  max-width: calc(100% - 3rem);
   margin-top: -2rem;
   padding: 1rem;
   border: 1px solid oklch(14.5% 0 0deg);
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
index 0419e971aad..4fe86dd27b3 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
@@ -7,8 +7,8 @@ export default function ExampleDialog() {
         View notifications
       </Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-        <Dialog.Popup className="fixed top-[calc(50%+1.25rem*var(--nested-dialogs))] left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 scale-[calc(1-0.1*var(--nested-dialogs))] bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[top,scale,opacity] duration-100 ease-out after:absolute after:inset-0 after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-100 after:ease-out after:pointer-events-none data-ending-style:top-[calc(50%+0.25rem+1.25rem*var(--nested-dialogs))] data-ending-style:scale-[0.96] data-ending-style:opacity-0 data-nested-dialog-open:after:opacity-100 data-starting-style:top-[calc(50%+0.25rem+1.25rem*var(--nested-dialogs))] data-starting-style:scale-[0.96] data-starting-style:opacity-0">
+        <Dialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute supports-[-webkit-touch-callout:none]:min-h-dvh" />
+        <Dialog.Popup className="fixed top-[calc(50%+1.25rem*var(--nested-dialogs))] left-1/2 -mt-8 flex w-96 max-w-[calc(100%-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 scale-[calc(1-0.1*var(--nested-dialogs))] bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[top,scale,opacity] duration-100 ease-out after:absolute after:inset-0 after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-100 after:ease-out after:pointer-events-none data-ending-style:top-[calc(50%+0.25rem+1.25rem*var(--nested-dialogs))] data-ending-style:scale-[0.96] data-ending-style:opacity-0 data-nested-dialog-open:after:opacity-100 data-starting-style:top-[calc(50%+0.25rem+1.25rem*var(--nested-dialogs))] data-starting-style:scale-[0.96] data-starting-style:opacity-0">
           <div className="flex flex-col gap-1">
             <Dialog.Title className="text-base font-bold">Notifications</Dialog.Title>
             <Dialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
@@ -21,7 +21,7 @@ export default function ExampleDialog() {
                 Customize
               </Dialog.Trigger>
               <Dialog.Portal>
-                <Dialog.Popup className="fixed top-[calc(50%+1.25rem*var(--nested-dialogs))] left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 scale-[calc(1-0.1*var(--nested-dialogs))] bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[top,scale,opacity] duration-100 ease-out after:absolute after:inset-0 after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-100 after:ease-out after:pointer-events-none data-ending-style:top-[calc(50%+0.25rem+1.25rem*var(--nested-dialogs))] data-ending-style:scale-[0.96] data-ending-style:opacity-0 data-nested-dialog-open:after:opacity-100 data-starting-style:top-[calc(50%+0.25rem+1.25rem*var(--nested-dialogs))] data-starting-style:scale-[0.96] data-starting-style:opacity-0">
+                <Dialog.Popup className="fixed top-[calc(50%+1.25rem*var(--nested-dialogs))] left-1/2 -mt-8 flex w-96 max-w-[calc(100%-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 scale-[calc(1-0.1*var(--nested-dialogs))] bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[top,scale,opacity] duration-100 ease-out after:absolute after:inset-0 after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-100 after:ease-out after:pointer-events-none data-ending-style:top-[calc(50%+0.25rem+1.25rem*var(--nested-dialogs))] data-ending-style:scale-[0.96] data-ending-style:opacity-0 data-nested-dialog-open:after:opacity-100 data-starting-style:top-[calc(50%+0.25rem+1.25rem*var(--nested-dialogs))] data-starting-style:scale-[0.96] data-starting-style:opacity-0">
                   <div className="flex flex-col gap-1">
                     <Dialog.Title className="text-base font-bold">
                       Customize notifications
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/open-from-menu/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/open-from-menu/css-modules/index.module.css
index eb836a23993..74db6af16cd 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/open-from-menu/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/open-from-menu/css-modules/index.module.css
@@ -141,7 +141,6 @@
 
 .Backdrop {
   position: fixed;
-  min-height: 100dvh;
   inset: 0;
   background-color: black;
   opacity: 0.2;
@@ -150,6 +149,7 @@
   /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
   @supports (-webkit-touch-callout: none) {
     position: absolute;
+    min-height: 100dvh;
   }
 
   @media (prefers-color-scheme: dark) {
@@ -172,7 +172,7 @@
   left: 50%;
   transform: translate(-50%, -50%);
   width: 24rem;
-  max-width: calc(100vw - 3rem);
+  max-width: calc(100% - 3rem);
   margin-top: -2rem;
   padding: 1rem;
   border: 1px solid oklch(14.5% 0 0deg);
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/open-from-menu/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/open-from-menu/tailwind/index.tsx
index f77d3e96210..f72b393d108 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/open-from-menu/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/open-from-menu/tailwind/index.tsx
@@ -30,8 +30,8 @@ export default function ExampleDialog() {
       {/* Control the dialog state */}
       <Dialog.Root open={dialogOpen} onOpenChange={setDialogOpen}>
         <Dialog.Portal>
-          <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-          <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
+          <Dialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute supports-[-webkit-touch-callout:none]:min-h-dvh" />
+          <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100%-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
             <div className="flex flex-col gap-1">
               <Dialog.Title className="text-base font-bold">Playlist details</Dialog.Title>
               <Dialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
index 196f78bd758..6fada7e1871 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
@@ -64,7 +64,6 @@
 
 .Backdrop {
   position: fixed;
-  min-height: 100dvh;
   inset: 0;
   background-color: rgb(0 0 0 / 20%);
   transition: opacity 150ms;
@@ -72,6 +71,7 @@
   /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
   @supports (-webkit-touch-callout: none) {
     position: absolute;
+    min-height: 100dvh;
   }
 
   @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
index e0459ad82ec..d4b1c245af5 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleUncontainedDialog() {
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black/20 dark:bg-black/50 transition-opacity duration-150 data-starting-style:opacity-0 data-ending-style:opacity-0 supports-[-webkit-touch-callout:none]:absolute" />
+        <Dialog.Backdrop className="fixed inset-0 bg-black/20 dark:bg-black/50 transition-opacity duration-150 data-starting-style:opacity-0 data-ending-style:opacity-0 supports-[-webkit-touch-callout:none]:absolute supports-[-webkit-touch-callout:none]:min-h-dvh" />
         <Dialog.Viewport className="fixed inset-0 grid place-items-center px-4 py-12 xl:py-6">
           <Dialog.Popup className="group/popup relative flex h-full w-full max-w-[70rem] xl:max-w-none justify-center pointer-events-none transition-opacity duration-150 data-starting-style:opacity-0 data-ending-style:opacity-0">
             <Dialog.Close
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
index d56a257bd8f..a15333da9f5 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
@@ -66,7 +66,6 @@
   --backdrop-opacity: 0.2;
   --bleed: 3rem;
   position: fixed;
-  min-height: 100dvh;
   inset: 0;
   background-color: black;
   opacity: calc(var(--backdrop-opacity) * (1 - var(--drawer-swipe-progress)));
@@ -77,6 +76,7 @@
   /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
   @supports (-webkit-touch-callout: none) {
     position: absolute;
+    min-height: 100dvh;
   }
 
   @media (prefers-color-scheme: dark) {
@@ -114,7 +114,7 @@
   --bleed: 3rem;
   box-sizing: border-box;
   width: calc(20rem + var(--bleed));
-  max-width: calc(100vw - 3rem + var(--bleed));
+  max-width: calc(100% - 3rem + var(--bleed));
   height: 100%;
   padding: 1.5rem;
   padding-right: calc(1.5rem + var(--bleed));
@@ -149,6 +149,7 @@
 
   @supports (-webkit-touch-callout: none) {
     --bleed: 0px;
+    max-width: calc(100vw - 3rem);
     margin-right: 0;
     border: 1px solid oklch(14.5% 0 0deg);
 
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx
index 186e00a3abe..59479567924 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx
@@ -7,9 +7,9 @@ export default function ExampleDrawer() {
         Open drawer
       </Drawer.Trigger>
       <Drawer.Portal>
-        <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
+        <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute supports-[-webkit-touch-callout:none]:min-h-dvh" />
         <Drawer.Viewport className="[--viewport-padding:0px] supports-[-webkit-touch-callout:none]:[--viewport-padding:0.625rem] fixed inset-0 flex items-stretch justify-end p-(--viewport-padding)">
-          <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] border-l border-neutral-950 bg-white p-6 pr-[calc(1.5rem+3rem)] text-neutral-950 outline-none shadow-[0.25rem_0.25rem_0] shadow-black/12 overflow-y-auto overscroll-contain touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-starting-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-3rem)] supports-[-webkit-touch-callout:none]:border supports-[-webkit-touch-callout:none]:pr-6 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] h-full w-[calc(20rem+3rem)] max-w-[calc(100%-3rem+3rem)] -mr-[3rem] border-l border-neutral-950 bg-white p-6 pr-[calc(1.5rem+3rem)] text-neutral-950 outline-none shadow-[0.25rem_0.25rem_0] shadow-black/12 overflow-y-auto overscroll-contain touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-starting-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-3rem)] supports-[-webkit-touch-callout:none]:border supports-[-webkit-touch-callout:none]:pr-6 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Drawer.Content className="mx-auto w-full max-w-[32rem]">
               <Drawer.Title className="mb-1 text-base font-bold">Drawer</Drawer.Title>
               <Drawer.Description className="mb-6 text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
index aa0a215edd9..52553608e3d 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
@@ -66,7 +66,6 @@
   --backdrop-opacity: 0.2;
   --bleed: 3rem;
   position: fixed;
-  min-height: 100dvh;
   inset: 0;
   background-color: black;
   opacity: calc(var(--backdrop-opacity) * (1 - var(--drawer-swipe-progress)));
@@ -74,6 +73,11 @@
   transition-property: opacity;
   transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
 
+  /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
+  @supports (-webkit-touch-callout: none) {
+    min-height: 100dvh;
+  }
+
   @media (prefers-color-scheme: dark) {
     --backdrop-opacity: 0.7;
   }
@@ -127,7 +131,7 @@
   width: calc(100% + 2px);
   margin-left: -1px;
   margin-right: -1px;
-  max-height: calc(80vh + var(--bleed));
+  max-height: calc(80% + var(--bleed));
   height: var(--drawer-height, auto);
   margin-bottom: calc(-1 * var(--bleed));
   padding: 1rem 1.5rem 1.5rem;
@@ -149,6 +153,10 @@
   will-change: transform;
   transform: translateY(var(--translate-y)) scale(var(--stack-scale));
 
+  @supports (-webkit-touch-callout: none) {
+    max-height: calc(80vh + var(--bleed));
+  }
+
   @media (prefers-color-scheme: dark) {
     border-color: white;
     background-color: oklch(14.5% 0 0deg);
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
index ab0de67ebdc..45267e749f3 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleDrawerNested() {
         Open drawer stack
       </Drawer.Trigger>
       <Drawer.Portal>
-        <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
+        <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute supports-[-webkit-touch-callout:none]:min-h-dvh" />
         <Drawer.Viewport className="fixed inset-0 flex items-end justify-center">
           <Drawer.Popup className={popupClassName}>
             <div className={handleClassName} />
@@ -127,7 +127,7 @@ export default function ExampleDrawerNested() {
 }
 
 const popupClassName =
-  "[--bleed:3rem] [--peek:1rem] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-step:0.05] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--scale-base:calc(max(0,1-(var(--nested-drawers)*var(--stack-step))))] [--scale:clamp(0,calc(var(--scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--shrink:calc(1-var(--scale))] [--height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))-var(--bleed)))] group/popup relative -mx-px -mb-[3rem] w-[calc(100%+2px)] max-h-[calc(80vh+3rem)] [height:var(--drawer-height,auto)] border border-neutral-950 border-b-0 bg-white px-6 pt-4 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+3rem)] text-neutral-950 outline-none shadow-[0.25rem_0.25rem_0] shadow-black/12 overflow-y-auto overscroll-contain touch-auto [transform-origin:50%_calc(100%-var(--bleed))] [transform:translateY(calc(var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--shrink)*var(--height))))_scale(var(--scale))] after:pointer-events-none after:absolute after:inset-0 after:bg-transparent after:content-[''] after:transition-[background-color] after:duration-[450ms] after:ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-swiping:duration-0 data-nested-drawer-swiping:duration-0 data-starting-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-ending-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-open:h-[calc(var(--height)+var(--bleed))] data-nested-drawer-open:overflow-hidden data-nested-drawer-open:after:bg-black/5 dark:border-white dark:border-b-0 dark:bg-neutral-950 dark:text-white dark:shadow-none [transition:transform_450ms_cubic-bezier(0.32,0.72,0,1),height_450ms_cubic-bezier(0.32,0.72,0,1),opacity_450ms_cubic-bezier(0.32,0.72,0,1)]";
+  "[--bleed:3rem] [--peek:1rem] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-step:0.05] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--scale-base:calc(max(0,1-(var(--nested-drawers)*var(--stack-step))))] [--scale:clamp(0,calc(var(--scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--shrink:calc(1-var(--scale))] [--height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))-var(--bleed)))] group/popup relative -mx-px -mb-[3rem] w-[calc(100%+2px)] max-h-[calc(80%+3rem)] supports-[-webkit-touch-callout:none]:max-h-[calc(80vh+3rem)] [height:var(--drawer-height,auto)] border border-neutral-950 border-b-0 bg-white px-6 pt-4 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+3rem)] text-neutral-950 outline-none shadow-[0.25rem_0.25rem_0] shadow-black/12 overflow-y-auto overscroll-contain touch-auto [transform-origin:50%_calc(100%-var(--bleed))] [transform:translateY(calc(var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--shrink)*var(--height))))_scale(var(--scale))] after:pointer-events-none after:absolute after:inset-0 after:bg-transparent after:content-[''] after:transition-[background-color] after:duration-[450ms] after:ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-swiping:duration-0 data-nested-drawer-swiping:duration-0 data-starting-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-ending-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-open:h-[calc(var(--height)+var(--bleed))] data-nested-drawer-open:overflow-hidden data-nested-drawer-open:after:bg-black/5 dark:border-white dark:border-b-0 dark:bg-neutral-950 dark:text-white dark:shadow-none [transition:transform_450ms_cubic-bezier(0.32,0.72,0,1),height_450ms_cubic-bezier(0.32,0.72,0,1),opacity_450ms_cubic-bezier(0.32,0.72,0,1)]";
 
 const contentClassName =
   'mx-auto w-full max-w-[32rem] transition-opacity duration-[300ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] group-data-nested-drawer-open/popup:opacity-0 group-data-nested-drawer-swiping/popup:opacity-100';
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css
index c04a6a95b48..fb17bd2c257 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css
@@ -66,7 +66,6 @@
   --backdrop-opacity: 0.2;
   --bleed: 3rem;
   position: fixed;
-  min-height: 100dvh;
   inset: 0;
   background-color: black;
   opacity: calc(var(--backdrop-opacity) * (1 - var(--drawer-swipe-progress)));
@@ -74,6 +73,11 @@
   transition-property: opacity;
   transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
 
+  /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
+  @supports (-webkit-touch-callout: none) {
+    min-height: 100dvh;
+  }
+
   @media (prefers-color-scheme: dark) {
     --backdrop-opacity: 0.7;
   }
@@ -104,7 +108,7 @@
   --bleed: 3rem;
   box-sizing: border-box;
   width: 100%;
-  max-height: calc(80vh + var(--bleed));
+  max-height: calc(80% + var(--bleed));
   margin-bottom: calc(-1 * var(--bleed));
   padding: 1rem 1.5rem 1.5rem;
   padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px) + var(--bleed));
@@ -119,6 +123,10 @@
   will-change: transform;
   transform: translateY(var(--drawer-swipe-movement-y));
 
+  @supports (-webkit-touch-callout: none) {
+    max-height: calc(80vh + var(--bleed));
+  }
+
   @media (prefers-color-scheme: dark) {
     border-top: 1px solid white;
     background-color: oklch(14.5% 0 0deg);
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx
index ef55b26f599..c3fa3377a83 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx
@@ -7,9 +7,9 @@ export default function ExampleDrawer() {
         Open bottom drawer
       </Drawer.Trigger>
       <Drawer.Portal>
-        <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
+        <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute supports-[-webkit-touch-callout:none]:min-h-dvh" />
         <Drawer.Viewport className="fixed inset-0 flex items-end justify-center">
-          <Drawer.Popup className="-mb-[3rem] w-full max-h-[calc(80vh+3rem)] border-t border-neutral-950 bg-white px-6 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+3rem)] pt-4 text-neutral-950 outline-none shadow-[0.25rem_0.25rem_0] shadow-black/12 overflow-y-auto overscroll-contain touch-auto [transform:translateY(var(--drawer-swipe-movement-y))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:[transform:translateY(calc(100%-3rem+2px))] data-starting-style:[transform:translateY(calc(100%-3rem+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Drawer.Popup className="-mb-[3rem] w-full max-h-[calc(80%+3rem)] supports-[-webkit-touch-callout:none]:max-h-[calc(80vh+3rem)] border-t border-neutral-950 bg-white px-6 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+3rem)] pt-4 text-neutral-950 outline-none shadow-[0.25rem_0.25rem_0] shadow-black/12 overflow-y-auto overscroll-contain touch-auto [transform:translateY(var(--drawer-swipe-movement-y))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:[transform:translateY(calc(100%-3rem+2px))] data-starting-style:[transform:translateY(calc(100%-3rem+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <div className="mx-auto mb-4 h-1 w-12 bg-neutral-300 dark:bg-neutral-700" />
             <Drawer.Content className="mx-auto w-full max-w-[32rem]">
               <Drawer.Title className="mb-1 text-base font-bold text-center">
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css
index 9689606db71..558f0c30306 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css
@@ -66,7 +66,6 @@
   --backdrop-opacity: 0.2;
   --bleed: 3rem;
   position: fixed;
-  min-height: 100dvh;
   inset: 0;
   background-color: black;
   opacity: calc(var(--backdrop-opacity) * (1 - var(--drawer-swipe-progress)));
@@ -74,6 +73,11 @@
   transition-property: opacity;
   transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
 
+  /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
+  @supports (-webkit-touch-callout: none) {
+    min-height: 100dvh;
+  }
+
   @media (prefers-color-scheme: dark) {
     --backdrop-opacity: 0.7;
   }
@@ -133,7 +137,7 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  max-height: calc(100dvh - var(--top-margin));
+  max-height: calc(100% - var(--top-margin));
   padding-bottom: max(0px, calc(var(--drawer-snap-point-offset) + var(--drawer-swipe-movement-y)));
   border-top: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
@@ -148,6 +152,10 @@
   transform: translateY(calc(var(--drawer-snap-point-offset) + var(--drawer-swipe-movement-y)));
   will-change: transform;
 
+  @supports (-webkit-touch-callout: none) {
+    max-height: calc(100dvh - var(--top-margin));
+  }
+
   @media (prefers-color-scheme: dark) {
     border-top: 1px solid white;
     background-color: oklch(14.5% 0 0deg);
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx
index 9aec475dea9..b6f3706b6df 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx
@@ -18,10 +18,10 @@ export default function ExampleDrawerSnapPoints() {
         Open snap drawer
       </Drawer.Trigger>
       <Drawer.Portal>
-        <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
+        <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute supports-[-webkit-touch-callout:none]:min-h-dvh" />
         <Drawer.Viewport className="fixed inset-0 flex items-end justify-center touch-none [--bleed:3rem] after:pointer-events-none after:fixed after:inset-x-0 after:bottom-0 after:h-[var(--bleed)] after:bg-white after:content-[''] data-closed:after:opacity-0 dark:after:bg-neutral-950">
           <Drawer.Popup
-            className="relative z-1 flex w-full max-h-[calc(100dvh-var(--top-margin))] min-h-0 flex-col overflow-visible border-t border-neutral-950 bg-white text-neutral-950 outline-none touch-none shadow-[0.25rem_0.25rem_0] shadow-black/12 [padding-bottom:max(0px,calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] [transform:translateY(calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] transition-[transform,box-shadow] duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-[var(--bleed)] after:bg-[inherit] after:content-[''] data-ending-style:[transform:translateY(calc(100%+2px))] data-starting-style:[transform:translateY(calc(100%+2px))] data-starting-style:[padding-bottom:0] data-ending-style:[padding-bottom:0] data-starting-style:shadow-[0.25rem_0.25rem_0] data-starting-style:shadow-black/0 data-ending-style:shadow-[0.25rem_0.25rem_0] data-ending-style:shadow-black/0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
+            className="relative z-1 flex w-full max-h-[calc(100%-var(--top-margin))] supports-[-webkit-touch-callout:none]:max-h-[calc(100dvh-var(--top-margin))] min-h-0 flex-col overflow-visible border-t border-neutral-950 bg-white text-neutral-950 outline-none touch-none shadow-[0.25rem_0.25rem_0] shadow-black/12 [padding-bottom:max(0px,calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] [transform:translateY(calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] transition-[transform,box-shadow] duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-[var(--bleed)] after:bg-[inherit] after:content-[''] data-ending-style:[transform:translateY(calc(100%+2px))] data-starting-style:[transform:translateY(calc(100%+2px))] data-starting-style:[padding-bottom:0] data-ending-style:[padding-bottom:0] data-starting-style:shadow-[0.25rem_0.25rem_0] data-starting-style:shadow-black/0 data-ending-style:shadow-[0.25rem_0.25rem_0] data-ending-style:shadow-black/0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
             style={{ '--top-margin': `${TOP_MARGIN_REM}rem` } as React.CSSProperties}
           >
             <div className="shrink-0 border-b border-neutral-300 px-6 pt-3.5 pb-4 touch-none select-none dark:border-neutral-700">
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/virtual-keyboard-aware/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/virtual-keyboard-aware/css-modules/index.module.css
index 029abf28245..4e708bad922 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/virtual-keyboard-aware/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/virtual-keyboard-aware/css-modules/index.module.css
@@ -66,7 +66,6 @@
   --backdrop-opacity: 0.2;
   --bleed: 3rem;
   position: fixed;
-  min-height: 100dvh;
   inset: 0;
   background-color: black;
   opacity: calc(var(--backdrop-opacity) * (1 - var(--drawer-swipe-progress)));
@@ -76,6 +75,7 @@
 
   @supports (-webkit-touch-callout: none) {
     position: absolute;
+    min-height: 100dvh;
   }
 
   @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/virtual-keyboard-aware/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/virtual-keyboard-aware/tailwind/index.tsx
index 7bbe4a3e336..c735626ef3d 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/virtual-keyboard-aware/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/virtual-keyboard-aware/tailwind/index.tsx
@@ -20,7 +20,7 @@ export default function ExampleDrawerVirtualKeyboardAware() {
       </Drawer.Trigger>
       <Drawer.VirtualKeyboardProvider>
         <Drawer.Portal>
-          <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
+          <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute supports-[-webkit-touch-callout:none]:min-h-dvh" />
           <Drawer.Viewport className="fixed inset-0 flex items-end justify-center touch-none [--bleed:3rem] after:pointer-events-none after:fixed after:inset-x-0 after:bottom-0 after:h-[var(--bleed)] after:bg-white after:content-[''] data-closed:after:opacity-0 has-[[data-swiping]]:after:opacity-0 dark:after:bg-neutral-950">
             <Drawer.Popup className="relative z-1 -mb-[var(--bleed)] flex h-[calc(100%-1rem+var(--bleed))] max-h-[calc(100%-1rem+var(--bleed))] w-full flex-col overflow-visible border-t border-neutral-950 bg-white text-neutral-950 outline-none touch-none shadow-[0.25rem_0.25rem_0] shadow-black/12 [--bleed:3rem] [--footer-reserved-height:calc(5.25rem+var(--bleed))] [transform:translateY(var(--drawer-swipe-movement-y))] transition-[transform,box-shadow] duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform data-swiping:select-none data-ending-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-starting-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-starting-style:shadow-[0.25rem_0.25rem_0] data-starting-style:shadow-black/0 data-ending-style:shadow-[0.25rem_0.25rem_0] data-ending-style:shadow-black/0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <div className="relative shrink-0 border-b border-neutral-300 px-6 py-4 touch-none select-none dark:border-neutral-700">