From 4b528f668c2d7ecfa00e86393d0d155cd595d14c Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Thu, 1 Mar 2018 00:32:36 +0100
Subject: [PATCH] fix(overlay): hide overlay container when there are no
 attached overlays (#10139)

Hides the `.cdk-overlay-container` if it doesn't have any attached overlays. This prevents the browser from rendering it as a transparent overlay.

Fixes #6882.
Fixes #10033.
---
 src/cdk/overlay/_overlay.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/cdk/overlay/_overlay.scss b/src/cdk/overlay/_overlay.scss
index 44287a8f7b6..bf95c8739c9 100644
--- a/src/cdk/overlay/_overlay.scss
+++ b/src/cdk/overlay/_overlay.scss
@@ -29,6 +29,12 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
   .cdk-overlay-container {
     position: fixed;
     z-index: $cdk-z-index-overlay-container;
+
+    &:empty {
+      // Hide the element when it doesn't have any child nodes. This doesn't
+      // include overlays that have been detached, rather than disposed.
+      display: none;
+    }
   }
 
   // We use an extra wrapper element in order to use make the overlay itself a flex item.