ngDialog stays in closing state until mouse movement stops

Question

I am using the ngDialog angular directive and testing in Chrome. If you look at the DOM (using Chrome tools), you will notice that when you close the ngDialog it will remain in the "ngdialog-closing" state until mouse movement stops. The DIV overlay remains open during this time and you cannot click on anything behind it.

http://likeastore.github.io/ngDialog

https://github.com/likeastore/ngDialog/blob/master/js/ngDialog.js

Does anyone know why this is and how to fix this?

Answer 1

After some research, it seems this was caused by the CSS animations. When I disabled them completely, I did not experience this issue.

This seems to do the trick. I replaced the binding of the animationend event with a timeout set to the length of the animation. The UX in Chrome is much better with this.

if (animationEndSupport && !options.disableAnimation) {
    scope.$destroy();
    $timeout(function () {
        privateMethods.closeDialogElement($dialog, value);
    }, 500);
    //$dialog.unbind(animationEndEvent).bind(animationEndEvent, function () {
    //    privateMethods.closeDialogElement($dialog, value);
    //});
    $dialog.addClass('ngdialog-closing');
} else {
    scope.$destroy();
    privateMethods.closeDialogElement($dialog, value);
}