Offcanvas not showing with .showing (#36353)

The transform of .showing was being overridden by .offcanvas.offcanvas-start, while .show wasn't. This resulted in an illusion of the offcanvas waiting for the backdrop, reported in #36347. Moving the show classes below the position classes fixes this problem.

diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss
index e923db2f2481b408c3214df300f695d3b0c6652a..5709479dc480589577f86a8e5c5b29d6dd984b1c 100644 (file)
--- a/scss/_offcanvas.scss
+++ b/scss/_offcanvas.scss
@@ -43,17 +43,6 @@
       @include box-shadow(var(--#{$prefix}offcanvas-box-shadow));
       @include transition(transform $offcanvas-transition-duration ease-in-out);
 
-      &.showing,
-      &.show:not(.hiding) {
-        transform: none;
-      }
-
-      &.showing,
-      &.hiding,
-      &.show {
-        visibility: visible;
-      }
-
       &.offcanvas-start {
         top: 0;
         left: 0;
@@ -88,6 +77,17 @@
         border-top: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
         transform: translateY(100%);
       }
+
+      &.showing,
+      &.show:not(.hiding) {
+        transform: none;
+      }
+
+      &.showing,
+      &.hiding,
+      &.show {
+        visibility: visible;
+      }
     }
 
     @if not ($infix == "") {