From cd04a2c689ad77c45edc63c9e283524c11620f48 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Sun, 27 Feb 2022 18:29:37 +0200
Subject: [PATCH] Menu: Remove transparency in Firefox (#1730)

---
 src/components/ui/Menu.scss | 4 ++++
 src/components/ui/Menu.tsx  | 9 +++++++--
 src/util/environment.ts     | 2 ++
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/Menu.scss b/src/components/ui/Menu.scss
index 7850219a9..e7e316743 100644
--- a/src/components/ui/Menu.scss
+++ b/src/components/ui/Menu.scss
@@ -89,5 +89,9 @@
     .footer {
       background: none;
     }
+
+    &.no-blur .bubble {
+      background: var(--color-background);
+    }
   }
 }
diff --git a/src/components/ui/Menu.tsx b/src/components/ui/Menu.tsx
index 0712db95a..b797606ee 100644
--- a/src/components/ui/Menu.tsx
+++ b/src/components/ui/Menu.tsx
@@ -10,7 +10,7 @@ import buildClassName from '../../util/buildClassName';
 import { dispatchHeavyAnimationEvent } from '../../hooks/useHeavyAnimationCheck';
 import useHistoryBack from '../../hooks/useHistoryBack';
 import { preventMessageInputBlurWithBubbling } from '../middle/helpers/preventMessageInputBlur';
-import { IS_COMPACT_MENU } from '../../util/environment';
+import { IS_BACKDROP_BLUR_SUPPORTED, IS_COMPACT_MENU } from '../../util/environment';
 
 import './Menu.scss';
 
@@ -113,7 +113,12 @@ const Menu: FC<OwnProps> = ({
 
   return (
     <div
-      className={buildClassName('Menu no-selection', !noCompact && IS_COMPACT_MENU && 'compact', className)}
+      className={buildClassName(
+        'Menu no-selection',
+        !noCompact && IS_COMPACT_MENU && 'compact',
+        !IS_BACKDROP_BLUR_SUPPORTED && 'no-blur',
+        className,
+      )}
       onKeyDown={isOpen ? handleKeyDown : undefined}
       onMouseEnter={onMouseEnter}
       onMouseLeave={isOpen ? onMouseLeave : undefined}
diff --git a/src/util/environment.ts b/src/util/environment.ts
index 6114ca1f9..33f2f6b59 100644
--- a/src/util/environment.ts
+++ b/src/util/environment.ts
@@ -86,6 +86,8 @@ export const DPR = window.devicePixelRatio || 1;
 
 export const MASK_IMAGE_DISABLED = true;
 
+export const IS_BACKDROP_BLUR_SUPPORTED = CSS.supports('backdrop-filter: blur()')
+  || CSS.supports('-webkit-backdrop-filter: blur()');
 export const IS_COMPACT_MENU = !IS_TOUCH_ENV;
 export const IS_SCROLL_PATCH_NEEDED = !IS_MAC_OS && !IS_IOS && !IS_ANDROID;