fix: CSS stacking context issue with behind menu backdrops on mobile

Moving the animation to the same element that has position: fixed resolves

app/components/ContextMenu/index.js

@@ -5,8 +5,11 @@ import { Portal } from "react-portal";
 import { Menu } from "reakit/Menu";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { fadeAndScaleIn, fadeAndSlideIn } from "shared/styles/animations";
-import Fade from "components/Fade";
+import {
+  fadeIn,
+  fadeAndScaleIn,
+  fadeAndSlideIn,
+} from "shared/styles/animations";
 import usePrevious from "hooks/usePrevious";
 
 type Props = {|
@@ -52,9 +55,7 @@ export default function ContextMenu({
       </Menu>
       {(rest.visible || rest.animating) && (
         <Portal>
-          <Fade timing="200ms">
-            <Backdrop />
-          </Fade>
+          <Backdrop />
         </Portal>
       )}
     </>
@@ -62,12 +63,13 @@ export default function ContextMenu({
 }
 
 const Backdrop = styled.div`
+  animation: ${fadeIn} 200ms ease-in-out;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background: ${(props) => props.theme.shadow};
+  background: ${(props) => props.theme.backdrop};
   z-index: ${(props) => props.theme.depths.menu - 1};
 
   ${breakpoint("tablet")`
@@ -84,7 +86,7 @@ const Position = styled.div`
     transform: none !important;
     top: auto !important;
     right: 8px !important;
-    bottom: 8px !important;
+    bottom: 16px !important;
     left: 8px !important;
   `};
 `;
@@ -94,15 +96,12 @@ const Background = styled.div`
   transform-origin: 50% 100%;
   max-width: 100%;
   background: ${(props) => props.theme.menuBackground};
-  border: ${(props) =>
-    props.theme.menuBorder ? `1px solid ${props.theme.menuBorder}` : "none"};
   border-radius: 6px;
   padding: 6px 0;
   min-width: 180px;
   overflow: hidden;
   overflow-y: auto;
   max-height: 75vh;
-  box-shadow: ${(props) => props.theme.menuShadow};
   pointer-events: all;
   font-weight: normal;
 
@@ -116,5 +115,8 @@ const Background = styled.div`
       props.left !== undefined ? "25%" : "75%"} 0;
     max-width: 276px;
     background: ${(props) => rgba(props.theme.menuBackground, 0.95)};
+    box-shadow: ${(props) => props.theme.menuShadow};
+    border: ${(props) =>
+      props.theme.menuBorder ? `1px solid ${props.theme.menuBorder}` : "none"};
   `};
 `;

app/components/Sidebar/Sidebar.js

@@ -6,6 +6,7 @@ import { Portal } from "react-portal";
 import { useLocation } from "react-router-dom";
 import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import { fadeIn } from "shared/styles/animations";
 import Fade from "components/Fade";
 import Flex from "components/Flex";
 import ResizeBorder from "./components/ResizeBorder";
@@ -154,9 +155,7 @@ const Sidebar = React.forwardRef<Props, HTMLButtonElement>(
       <>
         {ui.mobileSidebarVisible && (
           <Portal>
-            <Fade>
-              <Background onClick={ui.toggleMobileSidebar} />
-            </Fade>
+            <Backdrop onClick={ui.toggleMobileSidebar} />
           </Portal>
         )}
         {children}
@@ -203,7 +202,8 @@ const Sidebar = React.forwardRef<Props, HTMLButtonElement>(
   }
 );
 
-const Background = styled.a`
+const Backdrop = styled.a`
+  animation: ${fadeIn} 250ms ease-in-out;
   position: fixed;
   top: 0;
   left: 0;
@@ -211,7 +211,7 @@ const Background = styled.a`
   right: 0;
   cursor: default;
   z-index: ${(props) => props.theme.depths.sidebar - 1};
-  background: ${(props) => props.theme.sidebarShadow};
+  background: ${(props) => props.theme.backdrop};
 `;
 
 const Container = styled(Flex)`

shared/styles/theme.js

@@ -134,7 +134,7 @@ export const light = {
   sidebarBackground: colors.warmGrey,
   sidebarItemBackground: colors.black10,
   sidebarText: "rgb(78, 92, 110)",
-  sidebarShadow: "rgba(0, 0, 0, 0.2)",
+  backdrop: "rgba(0, 0, 0, 0.2)",
   shadow: "rgba(0, 0, 0, 0.2)",
 
   menuBackground: colors.white,
@@ -194,7 +194,7 @@ export const dark = {
   sidebarBackground: colors.veryDarkBlue,
   sidebarItemBackground: colors.transparent,
   sidebarText: colors.slate,
-  sidebarShadow: "rgba(255, 255, 255, 0.07)",
+  backdrop: "rgba(255, 255, 255, 0.3)",
   shadow: "rgba(0, 0, 0, 0.6)",
 
   menuBorder: lighten(0.1, colors.almostBlack),