Fix stacking context bug in offcanvas menu

Author: jsor

static-files/assets/3.284c81ab.css

@@ -1,9 +1,9 @@
 {
-  "main.css": "main.9d0a7f20.css",
+  "main.css": "main.d1256f64.css",
   "main.js": "main.f372b8b9.js",
-  "runtime.js": "runtime.79766d03.js",
+  "runtime.js": "runtime.c39e0f59.js",
   "2.0f8f4948.js": "2.0f8f4948.js",
-  "3.e4b0adb9.css": "3.e4b0adb9.css",
+  "3.284c81ab.css": "3.284c81ab.css",
   "3.ca2827c9.js": "3.ca2827c9.js",
   "4.87863994.css": "4.87863994.css",
   "4.7d534a7e.js": "4.7d534a7e.js",

static-files/assets/3.e4b0adb9.css

@@ -4,5 +4,9 @@
     position: fixed;
     top: 0;
     right: 0;
+    pointer-events: none;
+}
+
+.off-canvas-menu__content {
     transform: translate3d(105%, 0, 0);
 }

static-files/assets/main.9d0a7f20.css renamed to static-files/assets/main.d1256f64.css

@@ -6,13 +6,10 @@
     z-index: 1000;
     overflow-y: auto;
     overflow-x: hidden;
-    -webkit-overflow-scrolling: touch;
-    transition: all .35s cubic-bezier(0.23, 1, 0.32, 1);
-
     outline: none;
 
     &[aria-hidden="false"] {
-        transform: translate3D(0, 0, 0);
+        pointer-events: auto;
     }
 }
 
@@ -21,9 +18,19 @@
     right: 0;
     width: 285px;
     height: 100%;
+    overflow-y: auto;
     overflow-x: hidden;
     background: var(--color-background-lightest);
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.33);
+
+    -webkit-overflow-scrolling: touch;
+    transition: all .35s cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.off-canvas-menu[aria-hidden="false"] {
+    & .off-canvas-menu__content {
+        transform: translate3D(0, 0, 0);
+    }
 }
 
 .off-canvas-menu__close {

static-files/assets/manifest.json

@@ -7,7 +7,7 @@
         </div>
     </button>
 </div>
-<nav id="off-canvas-menu" class="off-canvas-menu" aria-hidden="true">
+<nav id="off-canvas-menu" class="off-canvas-menu" aria-hidden="true" tabindex="0">
     <div class="off-canvas-menu__content">
         <button aria-label="Close menu" class="off-canvas-menu__close" data-ctrly="off-canvas-menu" data-off-canvas-menu-control>
             <i class="icon-x" aria-hidden="true"></i>