coop-cloud-chaos-patchs/outline
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source 
Moving the animation to the same element that has position: fixed resolves
This commit is contained in:
Tom Moor
2021-04-16 19:02:43 -07:00
parent 940ad8479e
commit c46a032f0b
3 changed files with 19 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
app/components/ContextMenu/index.js
View File

@ -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"};
`};
`;