Closing animations are glitchy in Safari

doverphone commented 10 years ago

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 commented 10 years ago

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

npgauth commented 10 years ago

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 commented 9 years ago

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.

mgcrea / angular-motion

Closing animations are glitchy in Safari #8