Turning backdrop transition off causes backdrop to stick around

[kara]

If you remove the backdrop transition (e.g. with a backdropClass), the backdrop is never removed because 'transitionend' doesn't fire. This is a problem because then nothing is clickable in the app.

[jelbourn]

Relevant code spot: https://github.com/angular/material2/blob/b56f520f5717c58b69fb901c7a58fb0f47a9eeac/src/lib/core/overlay/overlay-ref.ts#L106

[fxck]

There's no easy and performant way to check if element will have transition.

How about something like this, which should support all kinds of transitions:

    if (backdropToDetach) {
      let _hasTransition: boolean = false;

      backdropToDetach.addEventListener('transitionstart', () => _hasTransition = true);

      backdropToDetach.classList.remove('md-overlay-backdrop-showing');
      backdropToDetach.classList.remove(this._state.backdropClass);

      backdropToDetach.addEventListener('transitionend', () => _cleanUpBackdrop());

      setTimeout(() => { if (!_hasTransition) _cleanUpBackdrop() });

    }

That timeout might not even be needed, haven't tried it out.

Also there's typo in that function name _detatchBackdrop should be _detachBackdrop.

@kara @jelbourn ?

[jelbourn]

I was just thinking that we always remove it after X milliseconds if there's no transitionend.
(where X probably equals the animation duration)

[fxck]

Yes, but you'd need to know what's the duration, which you'd have to parse from different css properties(and I think that some animations are inherited, so you'd potentially have to check all parent nodes as well?).

My way should be pretty safe.

[jelbourn]

For simplicity I'm okay with always removing it after 500ms now- if it ends up being a problem for someone, we can make it configurable.

[fxck]

It looks like transitionstart is not properly implemented anyway, so yeah.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}