bug: cdk-overlay-dark-backdrop is removed before overlay is able to transition out

[kherock]

Bug, feature request, or proposal:

I'm considering this a bug since the default behavior in MdDialog is broken. Currently the overlay detaches once the transition caused by removing cdk-overlay-backdrop-showing has ended. However, the cdk-overlay-dark-backdrop class added by default is also removed before the transition occurs.

What is the expected behavior?

The overlay should smoothly transition the backdrop out.

What is the current behavior?

Notice how there's no fade out in the demo:
https://material.angular.io/components/dialog/overview

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Latest

Is there anything else we should know?

I'm assuming the removal of custom classes early is intentional so that custom transitions can be defined on the backdrop. The easiest change that is mostly non breaking is to change .cdk-overlay-backdrop to have transition-props: all. However that isn't completely accurate and isn't configurable.

My preference is that the backdropClass specified in the overlay config are always applied up until the dialog is detached, and while the dialog is shown, ${this._state.backdropClass}-showing is toggled on. This allows for full customization of the backdrop before and after the transition.

[jelbourn]

@crisbeto do you remember why we remove the backdrop class immediately?

[crisbeto]

I don't think there's a particular reason for the backdropClass. The logic can easily be moved to the transitionend callback.

[crisbeto]

@jelbourn I've been playing around with this one for a while now and it seems to be a bit more problematic than I thought. There are two things that are preventing the backdrop from animating away correctly:

1. We remove the class immediately.
2. We destroy the overlay before the animation has completed.

I set it up to wait for the backdrop to animate away before removing the overlay, but that introduces its own set of issues:

• The overlays that use a transparent overlay now "correctly" wait for the backdrop to "animate" away, even though its transparent, it still has a 400ms transition on its opacity. This can be worked around with something like a 1ms transition.
• A bunch of tests need to be updated. I did it already and it's not too painful, but there are ~60 of them.
• Waiting for the backdrop to go away seems to mess up the closing animations for some components.

Here's what I have so far: crisbeto@cb2ce6b

[jelbourn]

@crisbeto if it's that problematic to change, I'd rather leave this for now and revisit it further down the road since I don't see it as being that major of an issue.

[Epenance]

I've been playing a bit around with the CDK and made a npm package to help out with this too.

What I've come down to that the detatchBackdrop should really only remove the -showing class and not the backdropClass that you attached in the config.

That way you can easily control the transitions and their durations with CSS on your own classes rather than having it on the base .cdk-overlay-backdroplike it is today, and it's very useful if you have many different backdrop colors (We use both black and white) or special settings.

[crisbeto]

There's #6627 that should provide some more flexibility.

[Epenance]

Was actually following that PR hoping for it to merged some time back last year, but it never seemed to get in :(

[Epenance]

Actually managed to fix the visual part of it by doing the following in the css:

.cdk-overlay-backdrop {
    background: transparent;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    z-index: $cdk-z-index-overlay-backdrop;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    transition: opacity $backdrop-animation-duration $backdrop-animation-timing-function, background $backdrop-animation-duration $backdrop-animation-timing-function;
    opacity: 0;

    &.cdk-overlay-backdrop-showing {
      opacity: 0.48;
    }
  }

Added the background: transparent; and a transition to the background color as well.

[thinkingmedia]

Here is the hack that I added to my project to get this working.

CSS:

.cdk-overlay-backdrop {
    background-color: rgba(0,0,0,0.5);
}

TypeScript:

this._overlayRef = this._overlay.create({hasBackdrop: true, backdropClass: ''});

As stated above the problem is that the class used to apply the color is removed immediately. It's also stated that changing when this is done introduces side effects.

Can't we add another config option that defines if the backdrop should be animated? Wouldn't that resolve side effect issues?

[crisbeto]

@thinkingmedia there's #10145 which solves the issue.

[GuerricPhalippou]

The following code used to show the Overlay only when resolving data or loading lazy modules:

CoreModule

router.events.pipe(
  filter(x => x instanceof NavigationStart)
).subscribe(() => loaderService.show());

router.events.pipe(
  filter(x => x instanceof NavigationEnd || x instanceof NavigationCancel || x instanceof NavigationError)
).subscribe(() => loaderService.hide());

LoaderService

export class LoaderService {

    overlayRef: OverlayRef;
    componentFactory: ComponentFactory<LoaderComponent>;
    componentPortal: ComponentPortal<LoaderComponent>;
    componentRef: ComponentRef<LoaderComponent>;

    constructor(
        private overlay: Overlay,
        private componentFactoryResolver: ComponentFactoryResolver
    ) {
        this.overlayRef = this.overlay.create(
            {
                hasBackdrop: true,
                positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically()
            }
        );

        this.componentFactory = this.componentFactoryResolver.resolveComponentFactory(LoaderComponent);

        this.componentPortal = new ComponentPortal(this.componentFactory.componentType);
    }

    show(message?: string) {
        this.componentRef = this.overlayRef.attach<LoaderComponent>(this.componentPortal);
        this.componentRef.instance.message = message;
    }

    hide() {
        this.overlayRef.detach();
    }
}

After #10145 fix, it shows the Overlay even on routes without data or lazy module. Can you suggest what I should do to restore the previous behavior?

For reference, my question on StackOverflow: https://stackoverflow.com/questions/54135784/updating-to-angular-7-2-broke-my-global-loader

[sthan001]

Angular 1's MD Dialog panel is very impressive than this evolving angular 2 material.
Please see this can get this feature(the backdrop animation to body of cdk-overlay-pane) sorted out sooner.