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

@@ -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.