fix(Popup): popup button dissapearing in safari

This commit is contained in:
Aminejv 2022-01-31 18:15:00 +01:00
parent bdd47e8916
commit e3d37dc52b
3 changed files with 9 additions and 3 deletions

View File

@ -12,7 +12,7 @@ import { css } from "@emotion/react";
* Popup trigger
* -----------------------------------------------------------------------------------------------*/
export function PopupTrigger({ children, isMobile, ...props }) {
export function PopupTrigger({ children, isMobile, style, ...props }) {
const [{ sidebarState, popupState }, { hidePopup, togglePopup }] = useFilterContext();
React.useEffect(() => {
@ -27,6 +27,8 @@ export function PopupTrigger({ children, isMobile, ...props }) {
<System.ButtonPrimitive
onClick={togglePopup}
css={Styles.HORIZONTAL_CONTAINER_CENTERED}
//NOTE(amine): fix to a bug where elements using rotate disappear in safari https://stackoverflow.com/questions/22621544/webkit-transform-breaks-z-index-on-safari
style={{ perspective: "1000px", ...style }}
{...props}
>
{children}

View File

@ -169,7 +169,7 @@ export default function Filter({
>
<div css={STYLES_NAVBAR}>
<div css={STYLES_NAVBAR_BACKGROUND} />
<div css={STYLES_FILTER_POPUP_WRAPPER}>
<div css={STYLES_FILTER_POPUP_WRAPPER} style={{ perspective: "1000px" }}>
<Popup
viewer={viewer}
onAction={onAction}

View File

@ -304,7 +304,11 @@ function Header({ totalFilesSummary, popupState, expandUploadSummary, collapseUp
aria-label="Upload Summary"
onClick={popupState.isSummaryExpanded ? collapseUploadSummary : expandUploadSummary}
>
<span css={Styles.HORIZONTAL_CONTAINER_CENTERED}>
<span
css={Styles.HORIZONTAL_CONTAINER_CENTERED}
//NOTE(amine): fix to a bug where elements using rotate disappear in safari https://stackoverflow.com/questions/22621544/webkit-transform-breaks-z-index-on-safari
style={{ perspective: "1000px" }}
>
<System.P2 color="textBlack" style={{ width: "5ch" }}>
{uploadProgress}%
</System.P2>