From a1db4e4d06268f33c6a32e1fd662a2ebd2940c18 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Wed, 24 Jan 2018 16:36:09 +0100
Subject: [PATCH] fix(overlay): server-side rendering error when creating
 backdrop element (#9448)

Avoids a couple of server-side rendering errors when the overlay's backdrop is being created.
---
 src/cdk/overlay/overlay-ref.ts | 23 +++++++++++++++--------
 src/cdk/overlay/overlay.ts     | 11 +++++++++--
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/cdk/overlay/overlay-ref.ts b/src/cdk/overlay/overlay-ref.ts
index c1be7f8b78b2..d55eee6567dd 100644
--- a/src/cdk/overlay/overlay-ref.ts
+++ b/src/cdk/overlay/overlay-ref.ts
@@ -39,7 +39,8 @@ export class OverlayRef implements PortalOutlet {
       private _pane: HTMLElement,
       private _config: ImmutableObject<OverlayConfig>,
       private _ngZone: NgZone,
-      private _keyboardDispatcher: OverlayKeyboardDispatcher) {
+      private _keyboardDispatcher: OverlayKeyboardDispatcher,
+      private _document: Document) {
 
     if (_config.scrollStrategy) {
       _config.scrollStrategy.attach(this);
@@ -259,7 +260,9 @@ export class OverlayRef implements PortalOutlet {
 
   /** Attaches a backdrop for this overlay. */
   private _attachBackdrop() {
-    this._backdropElement = document.createElement('div');
+    const showingClass = 'cdk-overlay-backdrop-showing';
+
+    this._backdropElement = this._document.createElement('div');
     this._backdropElement.classList.add('cdk-overlay-backdrop');
 
     if (this._config.backdropClass) {
@@ -275,13 +278,17 @@ export class OverlayRef implements PortalOutlet {
     this._backdropElement.addEventListener('click', () => this._backdropClick.next(null));
 
     // Add class to fade-in the backdrop after one frame.
-    this._ngZone.runOutsideAngular(() => {
-      requestAnimationFrame(() => {
-        if (this._backdropElement) {
-          this._backdropElement.classList.add('cdk-overlay-backdrop-showing');
-        }
+    if (typeof requestAnimationFrame !== 'undefined') {
+      this._ngZone.runOutsideAngular(() => {
+        requestAnimationFrame(() => {
+          if (this._backdropElement) {
+            this._backdropElement.classList.add(showingClass);
+          }
+        });
       });
-    });
+    } else {
+      this._backdropElement.classList.add(showingClass);
+    }
   }
 
   /**
diff --git a/src/cdk/overlay/overlay.ts b/src/cdk/overlay/overlay.ts
index 20ef18f06974..d29135858c28 100644
--- a/src/cdk/overlay/overlay.ts
+++ b/src/cdk/overlay/overlay.ts
@@ -57,8 +57,15 @@ export class Overlay {
   create(config?: OverlayConfig): OverlayRef {
     const pane = this._createPaneElement();
     const portalOutlet = this._createPortalOutlet(pane);
-    return new OverlayRef(portalOutlet, pane, new OverlayConfig(config), this._ngZone,
-        this._keyboardDispatcher);
+
+    return new OverlayRef(
+      portalOutlet,
+      pane,
+      new OverlayConfig(config),
+      this._ngZone,
+      this._keyboardDispatcher,
+      this._document
+    );
   }
 
   /**