diff --git a/resources/css/components/bottom-sheet.css b/resources/css/components/bottom-sheet.css
index 2b1218a5..ed2be020 100644
--- a/resources/css/components/bottom-sheet.css
+++ b/resources/css/components/bottom-sheet.css
@@ -36,16 +36,16 @@
 @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
 
 @layer material.components {
+    /* The scrim fades out while the view's `x-transition` holds its `display` (see drawer.css). */
     [data-md-bottom-sheet-scrim] {
         position: fixed;
         inset: 0;
         z-index: 40;
         background-color: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent);
         opacity: 0;
-        transition-property: opacity, display;
+        transition-property: opacity;
         transition-duration: var(--md-sys-motion-effects-default-duration);
         transition-timing-function: var(--md-sys-motion-effects-default);
-        transition-behavior: allow-discrete;
     }
 
     [data-md-bottom-sheet][data-md-open] > [data-md-bottom-sheet-scrim] {
diff --git a/resources/css/components/drawer.css b/resources/css/components/drawer.css
index 1afca009..f1f540d4 100644
--- a/resources/css/components/drawer.css
+++ b/resources/css/components/drawer.css
@@ -41,17 +41,19 @@
 @import './divider.css';
 
 @layer material.components {
-    /* The scrim fades in and, while `display` is held by `allow-discrete`, back out. */
+    /* The scrim fades in from `@starting-style` and back out while the view's `x-transition` holds
+       its `display` for this duration. Not `allow-discrete` on `display`: Firefox does not transition
+       `display`, so the scrim vanished there, and in the other engines it would hold a second time
+       after Alpine's hold. */
     [data-md-drawer-scrim] {
         position: fixed;
         inset: 0;
         z-index: 40;
         background-color: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent);
         opacity: 0;
-        transition-property: opacity, display;
+        transition-property: opacity;
         transition-duration: var(--md-sys-motion-effects-default-duration);
         transition-timing-function: var(--md-sys-motion-effects-default);
-        transition-behavior: allow-discrete;
     }
 
     [data-md-drawer][data-md-open] > [data-md-drawer-scrim] {
diff --git a/resources/views/components/bottom-sheet.blade.php b/resources/views/components/bottom-sheet.blade.php
index b67a897a..844744f3 100644
--- a/resources/views/components/bottom-sheet.blade.php
+++ b/resources/views/components/bottom-sheet.blade.php
@@ -104,7 +104,8 @@
     @if ($standard) data-md-standard @endif
 >
     @unless ($standard)
-        <div data-md-bottom-sheet-scrim x-cloak x-show="open" x-on:click="close()" aria-hidden="true"></div>
+        {{-- Alpine's CSS transition holds the scrim for its fade, as in drawer.blade.php. --}}
+        <div data-md-bottom-sheet-scrim x-cloak x-show="open" x-transition:enter="md-scrim-transition" x-transition:leave="md-scrim-transition" x-on:click="close()" aria-hidden="true"></div>
     @endunless
 
     @if ($stops !== [])
diff --git a/resources/views/components/drawer.blade.php b/resources/views/components/drawer.blade.php
index 93bb9fe1..9c86a64a 100644
--- a/resources/views/components/drawer.blade.php
+++ b/resources/views/components/drawer.blade.php
@@ -93,7 +93,11 @@
     data-md-drawer
     @if ($standard) data-md-standard @endif
 >
-    <div data-md-drawer-scrim x-cloak x-show="open" @if (! $withoutBackdropClose) x-on:click="close()" @endif aria-hidden="true"></div>
+    {{-- The class names only turn on Alpine's CSS transition: it keeps the scrim displayed for the
+         computed transition-duration (drawer.css's effects token) before hiding it, because Firefox
+         does not transition `display`, even with `allow-discrete`. Both stages, so reopening during
+         the fade cancels the pending hide. --}}
+    <div data-md-drawer-scrim x-cloak x-show="open" x-transition:enter="md-scrim-transition" x-transition:leave="md-scrim-transition" @if (! $withoutBackdropClose) x-on:click="close()" @endif aria-hidden="true"></div>
 
     <aside
         x-cloak