From d0ad3b763a53b1655afbf5e8a2769d6f64bf908c Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Tue, 23 Jan 2018 16:35:10 +0100
Subject: [PATCH] fix(overlay): transparent overlay not blocking scroll on
 Firefox 57 (#9446)

As of Firefox 57, it looks like elements with a transparent background won't capture scroll events. These changes work around the issue by not setting the background color, but using `opacity` to hide the element while keeping it scrollable.

Fixes #8924.
---
 src/cdk/overlay/_overlay.scss | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/cdk/overlay/_overlay.scss b/src/cdk/overlay/_overlay.scss
index 766bd603efa..cbdb6fedbc9 100644
--- a/src/cdk/overlay/_overlay.scss
+++ b/src/cdk/overlay/_overlay.scss
@@ -73,7 +73,13 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
   }
 
   .cdk-overlay-transparent-backdrop {
-    background: none;
+    // Note: as of Firefox 57, having the backdrop be `background: none` will prevent it from
+    // capturing the user's mouse scroll events. Since we also can't use something like
+    // `rgba(0, 0, 0, 0)`, we work around the inconsistency by not setting the background at
+    // all and using `opacity` to make the element transparent.
+    &, &.cdk-overlay-backdrop-showing {
+      opacity: 0;
+    }
   }
 
   // Used when disabling global scrolling.