From 15e4fa7ed157306edd76f38c4a24e6e048f21f35 Mon Sep 17 00:00:00 2001 From: Andreas Reinhold / reini Date: Wed, 16 Sep 2026 20:26:11 +0200 Subject: [PATCH] Slide the sheets and close the search view out in Firefox too The side sheet, the bottom sheet's panel and the docked search's scrim and view kept `display` alive through their exit with `transition-behavior: allow-discrete`. Firefox does not transition `display` (Chrome 117 and Safari 18 do), and `x-show` sets `display: none` in the frame the exit starts, so in Firefox the sheets vanished instead of sliding out and the search view and scrim vanished instead of fading. The docked search had a second problem in every engine: neither the view nor the scrim had a closed state to transition to, so where `display` was held (Chrome, Safari) the view stood at full opacity for its duration and then disappeared. Each element now carries `x-transition:enter`/`:leave="md-transition"`, the approach the two sheet scrims already took (renamed from `md-scrim-transition` to one name for all of them). The class only switches Alpine to CSS-transition mode, so `x-show` holds `display` for the element's computed transition-duration before hiding it, in every engine, and a reopen during the exit cancels the pending hide; nothing styles it. `display` and `allow-discrete` leave the transitions so Chrome and Safari do not hold a second time. Alpine reads the first `transition-duration` listed, which is the closing slide or fade in each list (the preset panel lists translate before height). The search view now closes back into the bar (opacity 0, `scale: 1 0.9`, the reverse of its `@starting-style` entry) and its scrim fades out on close and when the search turns full screen. Under reduced motion the durations are zero and every one of them closes at once. Four browser tests sample each exit mid-way in the page, in the same round trip as the close: the sheets part of the way to their closed offset, the search scrim and view part of the way faded, each still displayed, then `display: none`. All four fail on main in Firefox (the two search tests in Chrome too) and pass in Chrome, Firefox and Safari. OverlayTest pins the drawer's new transition and the view's markup. Co-Authored-By: Claude Opus 5 (1M context) --- resources/css/components/bottom-sheet.css | 16 ++--- resources/css/components/drawer.css | 14 +++-- resources/css/components/search.css | 19 ++++-- .../views/components/bottom-sheet.blade.php | 7 ++- resources/views/components/drawer.blade.php | 13 ++-- resources/views/components/search.blade.php | 6 +- tests/Browser/ContainmentTest.php | 62 +++++++++++++++++++ tests/Browser/PickingTest.php | 49 +++++++++++++++ tests/Feature/Components/OverlayTest.php | 10 ++- 9 files changed, 169 insertions(+), 27 deletions(-) diff --git a/resources/css/components/bottom-sheet.css b/resources/css/components/bottom-sheet.css index ed2be020..f68a7994 100644 --- a/resources/css/components/bottom-sheet.css +++ b/resources/css/components/bottom-sheet.css @@ -31,6 +31,9 @@ * * The scrim fades out as it fades in, and the state rules match the root's own scrim and panel, * so a sheet nested in an open one (a menu's sheet at compact inside a sheet) keeps its own state. + * Both keep `x-show`, and the view's `x-transition` holds their `display` through the exit rather + * than `allow-discrete`, which Firefox does not honour for `display` (see drawer.css); Alpine holds + * for the first `transition-duration` listed, so the closing slide is listed first. */ @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility; @@ -85,10 +88,9 @@ box-shadow: var(--md-sys-elevation-1); padding-bottom: var(--material-safe-bottom, env(safe-area-inset-bottom)); translate: 0 100%; - transition-property: translate, display; + transition-property: translate; transition-duration: var(--md-sys-motion-effects-default-duration); transition-timing-function: var(--md-sys-motion-easing-emphasized-accelerate); - transition-behavior: allow-discrete; } [data-md-bottom-sheet][data-md-open] > [data-md-bottom-sheet-panel] { @@ -107,14 +109,14 @@ spring, independent of the translate that opens and closes the sheet. */ [data-md-bottom-sheet-panel][data-md-preset] { height: var(--sheet-max-height); - transition-property: translate, height, display; - transition-duration: var(--md-sys-motion-effects-default-duration), var(--md-sys-motion-spatial-default-duration), var(--md-sys-motion-effects-default-duration); - transition-timing-function: var(--md-sys-motion-easing-emphasized-accelerate), var(--md-sys-motion-spatial-default), var(--md-sys-motion-easing-emphasized-accelerate); + transition-property: translate, height; + transition-duration: var(--md-sys-motion-effects-default-duration), var(--md-sys-motion-spatial-default-duration); + transition-timing-function: var(--md-sys-motion-easing-emphasized-accelerate), var(--md-sys-motion-spatial-default); } [data-md-bottom-sheet][data-md-open] > [data-md-bottom-sheet-panel][data-md-preset] { - transition-duration: var(--md-sys-motion-spatial-default-duration), var(--md-sys-motion-spatial-default-duration), var(--md-sys-motion-spatial-default-duration); - transition-timing-function: var(--md-sys-motion-easing-emphasized-decelerate), var(--md-sys-motion-spatial-default), var(--md-sys-motion-easing-emphasized-decelerate); + transition-duration: var(--md-sys-motion-spatial-default-duration), var(--md-sys-motion-spatial-default-duration); + transition-timing-function: var(--md-sys-motion-easing-emphasized-decelerate), var(--md-sys-motion-spatial-default); } [data-md-bottom-sheet-handle] { diff --git a/resources/css/components/drawer.css b/resources/css/components/drawer.css index f1f540d4..47539517 100644 --- a/resources/css/components/drawer.css +++ b/resources/css/components/drawer.css @@ -18,9 +18,12 @@ * 400px cap, 24dp start/end padding, a large corner on the inner edge only — from the specs * table. It enters on the emphasized-decelerate easing rather than a spring, because a sheet * anchored to an edge that overshot would open a gap, and leaves on emphasized accelerate: the - * view keeps `x-show`, so `@starting-style` gives the entry its start and `allow-discrete` holds - * `display` through the exit, whose timing comes from the closed state's own rule (a transition - * takes the after-change style's). Reduced motion zeroes both duration tokens (tokens/motion.css). + * view keeps `x-show`, so `@starting-style` gives the entry its start and the view's `x-transition` + * holds `display` through the exit, whose timing comes from the closed state's own rule (a + * transition takes the after-change style's). Not `allow-discrete` on `display`: Firefox does not + * transition `display`, and in the other engines it would hold a second time after Alpine's hold. + * Alpine holds for the first `transition-duration` listed, so each exit's longest transition is + * listed first. Reduced motion zeroes both duration tokens (tokens/motion.css). * Below `expanded` it slides, from whichever edge `data-md-side` names in the document's direction; * once `standard` makes it co-planar it only fades (an in-flow box does not need to travel). Every * state rule matches the sheet and scrim as the root's children, so a sheet nested in an open one @@ -84,10 +87,9 @@ color: var(--md-sys-color-on-surface); box-shadow: var(--md-sys-elevation-1); translate: var(--sheet-offset) 0; - transition-property: translate, display; + transition-property: translate; transition-duration: var(--md-sys-motion-effects-default-duration); transition-timing-function: var(--md-sys-motion-easing-emphasized-accelerate); - transition-behavior: allow-discrete; } [data-md-drawer-sheet][data-md-side='end'] { @@ -167,7 +169,7 @@ background-color: var(--md-sys-color-surface); box-shadow: none; 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-easing-emphasized-accelerate); } diff --git a/resources/css/components/search.css b/resources/css/components/search.css index 035b8bc4..92f010b3 100644 --- a/resources/css/components/search.css +++ b/resources/css/components/search.css @@ -56,10 +56,9 @@ inset: 0; z-index: -1; background-color: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent); - transition-property: opacity, display; + transition-property: opacity; transition-duration: var(--md-sys-motion-effects-fast-duration); transition-timing-function: var(--md-sys-motion-effects-fast); - transition-behavior: allow-discrete; } @starting-style { @@ -68,6 +67,12 @@ } } + /* Closing (or turning full screen), the scrim fades back out while the view's `x-transition` + holds its `display`: not `allow-discrete`, which Firefox does not honour for `display`. */ + [data-md-search]:is(:not([data-md-open]), [data-md-full-screen]) > [data-md-search-scrim] { + opacity: 0; + } + [data-md-search-bar] { position: relative; z-index: 1; @@ -201,10 +206,9 @@ background-color: var(--md-sys-color-surface-container-high); box-shadow: var(--md-sys-elevation-3); transform-origin: top; - transition-property: opacity, scale, display; + transition-property: opacity, scale; transition-duration: var(--md-sys-motion-spatial-fast-duration); transition-timing-function: var(--md-sys-motion-spatial-fast); - transition-behavior: allow-discrete; } @starting-style { @@ -214,6 +218,13 @@ } } + /* Closing, the view goes back the way it came, into the bar, while its `x-transition` holds + `display` for the same duration. */ + [data-md-search]:not([data-md-open]) > [data-md-search-view] { + opacity: 0; + scale: 1 0.9; + } + /* M3: the docked container is at least 240px tall — once there is something in it to be tall about; a search with nothing to show stays the height of its bar. */ [data-md-search-view]:has([data-md-search-results], [data-md-search-suggestions]) { diff --git a/resources/views/components/bottom-sheet.blade.php b/resources/views/components/bottom-sheet.blade.php index 844744f3..23cffe5d 100644 --- a/resources/views/components/bottom-sheet.blade.php +++ b/resources/views/components/bottom-sheet.blade.php @@ -104,8 +104,9 @@ @if ($standard) data-md-standard @endif > @unless ($standard) - {{-- Alpine's CSS transition holds the scrim for its fade, as in drawer.blade.php. --}} - + {{-- `md-transition` turns on Alpine's CSS transition, which holds the scrim and the panel + displayed through their exit, as in drawer.blade.php. --}} + @endunless @if ($stops !== []) @@ -117,6 +118,8 @@
- {{-- 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. --}} - + {{-- `md-transition` is a class name only to turn on Alpine's CSS transition: `x-show` then keeps + the scrim and the sheet displayed for their computed transition-duration (drawer.css's + tokens) before hiding them, so they fade and slide out rather than vanish — Firefox does not + transition `display`, even with `allow-discrete`. Both stages, so reopening during the exit + cancels the pending hide. Nothing styles the class. --}} +