Closing animations are glitchy in Safari

[doverphone]

When closing a modal or popover then modal will appear again briefly after the modal has faded out. To reproduce: go to http://mgcrea.github.io/angular-strap/ in Safari and open/close modals and popovers.

[juleswool]

This issue also happens occasionally with IE10 and IE11. Does any one know why or have a fix?

[npgauth]

Seeing the same thing with the Desktop Safari. I like the animations in the other browsers and would really like to keep them, so if anyone knows a fix, please let us know.. Thanks!

[terranisu]

Well, I got a solution, but it looks mostly like a workaround and I think it's a bit ugly. I had spent a bunch of time to solve the problem in Safari, but haven't found a better way.
It's possible to increase animation duration in ng-leave classes and to add additional frames in leave animations.

Example for flip.less:

@flip-extended-duration: .7s;
...

.am-flip-x {
  ...
  &.ng-leave {
    animation-duration: @flip-extended-duration;
    animation-name: flipOutX;
    animation-play-state: paused;
    &.ng-leave-active {
      animation-play-state: running;
    }
  }
}

...

@keyframes flipOutX {
  from {
    opacity: 1;
    transform: perspective(400px) rotateX(0deg);
  }
  // Additional frame
  50% {
    opacity: 0;
    transform: perspective(400px) rotateX(60deg);
  }
  to {
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
  }
}

Changes for all other animations you can find in my fork: https://github.com/terranisu/angular-motion
I can create pull request if @mgcrea interested in my solution.