notify div is not removed from DOM when transitionend event is not fired

[chris-armstrong]

I've noticed an intermittent issue where

element housing the notification message is not always removed from the DOM after it is faded out (i.e. after the opacity is set to 0). This results in the transparent notification message obscuring part of the screen, preventing it from receiving mouse clicks or touch events.

The problem seems to be this code:

                var templateElement = $compile(template)(scope);
                templateElement.bind('webkitTransitionEnd oTransitionEnd otransitionend transitionend msTransitionEnd', function(e){
                    if (e.propertyName === 'opacity' || e.currentTarget.style.opacity === 0 || 
                        (e.originalEvent && e.originalEvent.propertyName === 'opacity')){

                        templateElement.remove();

transitionend event isn't always sent by the browser - an instance may be when the transition is interrupted by another process. This means that the element may not get removed where the event isn't fired.

[chris-armstrong]

Please find attached a pull request #56 that fixes this issue.

You can replicate the issue by setting a breakpoint in $scope.close = function() {... and then manually closing the element and then stepping over the following line, which suppresses the transitionend event:

templateElement.css('opacity',0).attr('data-closing','true');

[xReeQz]

The issue still persists. Will the corresponding PR be merged any time soon?

[KaduAmaral]

This will be fixed some day?