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

10
app/components/Sidebar/Sidebar.js
View File

@ -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)`