From bb4f9d74fb399986eeeed07da10eded0908200b1 Mon Sep 17 00:00:00 2001
From: Justin Kruit <justinkruitnl@gmail.com>
Date: Sat, 14 May 2022 20:36:01 +0200
Subject: [PATCH] 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.
---
 scss/_offcanvas.scss | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss
index e923db2f2481..5709479dc480 100644
--- 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 == "") {