diff --git a/src/lib/core/overlay/overlay-ref.ts b/src/lib/core/overlay/overlay-ref.ts index 4ebaa2d2745e..7f99117ad6ba 100644 --- a/src/lib/core/overlay/overlay-ref.ts +++ b/src/lib/core/overlay/overlay-ref.ts @@ -92,7 +92,9 @@ export class OverlayRef implements PortalHost { // Add class to fade-in the backdrop after one frame. requestAnimationFrame(() => { - this._backdropElement.classList.add('md-overlay-backdrop-showing'); + if (this._backdropElement) { + this._backdropElement.classList.add('md-overlay-backdrop-showing'); + } }); } @@ -101,18 +103,27 @@ export class OverlayRef implements PortalHost { let backdropToDetach = this._backdropElement; if (backdropToDetach) { + let onTransitionEnd = () => { + if (backdropToDetach) { + backdropToDetach.parentNode.removeChild(backdropToDetach); + + // It is possible that a new portal has been attached to this overlay since we started + // removing the backdrop. If that is the case, only clear the backdrop reference if it + // is still the same instance that we started to remove. + if (this._backdropElement == backdropToDetach) { + this._backdropElement = null; + } + } + }; + backdropToDetach.classList.remove('md-overlay-backdrop-showing'); backdropToDetach.classList.remove(this._state.backdropClass); - backdropToDetach.addEventListener('transitionend', () => { - backdropToDetach.parentNode.removeChild(backdropToDetach); - - // It is possible that a new portal has been attached to this overlay since we started - // removing the backdrop. If that is the case, only clear the backdrop reference if it - // is still the same instance that we started to remove. - if (this._backdropElement == backdropToDetach) { - this._backdropElement = null; - } - }); + backdropToDetach.addEventListener('transitionend', onTransitionEnd); + + // If the backdrop doesn't have a transition, the `transitionend` event won't fire. + // In this case we make it unclickable and we try to remove it after a delay. + backdropToDetach.style.pointerEvents = 'none'; + setTimeout(onTransitionEnd, 500); } } }