Skip to content

Commit 3581f0f

Browse files
committed
fix(overlay): server-side rendering error when creating backdrop element
Avoids a couple of server-side rendering errors when the overlay's backdrop is being created.
1 parent ac244d9 commit 3581f0f

File tree

2 files changed

+19
-9
lines changed

2 files changed

+19
-9
lines changed

src/cdk/overlay/overlay-ref.ts

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,8 @@ export class OverlayRef implements PortalOutlet {
3939
private _pane: HTMLElement,
4040
private _config: ImmutableObject<OverlayConfig>,
4141
private _ngZone: NgZone,
42-
private _keyboardDispatcher: OverlayKeyboardDispatcher) {
42+
private _keyboardDispatcher: OverlayKeyboardDispatcher,
43+
private _document: Document) {
4344

4445
if (_config.scrollStrategy) {
4546
_config.scrollStrategy.attach(this);
@@ -259,7 +260,9 @@ export class OverlayRef implements PortalOutlet {
259260

260261
/** Attaches a backdrop for this overlay. */
261262
private _attachBackdrop() {
262-
this._backdropElement = document.createElement('div');
263+
const showingClass = 'cdk-overlay-backdrop-showing';
264+
265+
this._backdropElement = this._document.createElement('div');
263266
this._backdropElement.classList.add('cdk-overlay-backdrop');
264267

265268
if (this._config.backdropClass) {
@@ -275,13 +278,13 @@ export class OverlayRef implements PortalOutlet {
275278
this._backdropElement.addEventListener('click', () => this._backdropClick.next(null));
276279

277280
// Add class to fade-in the backdrop after one frame.
278-
this._ngZone.runOutsideAngular(() => {
279-
requestAnimationFrame(() => {
280-
if (this._backdropElement) {
281-
this._backdropElement.classList.add('cdk-overlay-backdrop-showing');
282-
}
281+
if (typeof requestAnimationFrame !== 'undefined') {
282+
this._ngZone.runOutsideAngular(() => {
283+
requestAnimationFrame(() => this._backdropElement!.classList.add(showingClass));
283284
});
284-
});
285+
} else {
286+
this._backdropElement.classList.add(showingClass);
287+
}
285288
}
286289

287290
/**

src/cdk/overlay/overlay.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,14 @@ export class Overlay {
6161
create(config: OverlayConfig = defaultConfig): OverlayRef {
6262
const pane = this._createPaneElement();
6363
const portalOutlet = this._createPortalOutlet(pane);
64-
return new OverlayRef(portalOutlet, pane, config, this._ngZone, this._keyboardDispatcher);
64+
return new OverlayRef(
65+
portalOutlet,
66+
pane,
67+
config,
68+
this._ngZone,
69+
this._keyboardDispatcher,
70+
this._document
71+
);
6572
}
6673

6774
/**

0 commit comments

Comments
 (0)