Jerky transition in chrome on opening/closing.

[JonCognioDigital]

Has anybody else experienced this?

Basically, when I open a modal and use a css transform (scale) it's really choppy/jerky when you open and close the window, but only in chrome.

I'm using the in class and some pretty simple sass...

.modal{

    transition: all 0.3s ease-out;

    .modal-dialog{
        will-change: transform;
        opacity: 0;
        transform: scale(0.7);
        transition: all 0.3s ease-out;
    }

    &.in{
        .modal-dialog{
            opacity: 1;
            transform: scale(1);
        }
    }
}

I have to have the transition in .modal as well as .modal-dialog, otherwise angular ui doesn't wait for the animation to finish before removing the modal from the DOM.

The weird thing is that once the modal is open I can use dev tools to switch off the transform and opacity styles at will and the modal shrinks and disappears using buttery smooth transitions, but when opening and closing the modal it drops to 3 or 4 frames per second.

I'm convinced it's because something else is happening when Angular UI makes the modal and inserts it into the dom. There are loads of other ng-aminate classes added at the same time which could be causing the problem but it's weird that it doesn't happen in IE, which does pause for a second before opening the modal with a very smooth animation.

Any ideas?

[JonCognioDigital]

Weirdly though, the duplicate transition is only required by chrome which doesn't do the close animation unless it's there. IE10 on the other hand (using an old version for testing purposes) does the close animation if you just have the transition inside .modal-dialog

I really can't get my head around how Angular UI uses animations and how it calculates when to remove the modal from the DOM. It seems inconsistent at best and rarely seems to actually match the CSS transition timing.

[wesleycho]

Can you create a reproduction based on Plunker? Here is one you can fork and work off of.

[wesleycho]

I am not able to reproduce this here

[JonCognioDigital]

Hi Wesley,

Thanks for taking the time to look into this for me. Unfortunately I am not able to repeat it easily using plunkr either. Partly because I've never used Plunkr before and partly becuase I think some of the delays are happening doe to the complex nature of the HTML on my page and my custom CSS.

I have tried removing the transition from the backdrop and it disappears immediately, as it should, but when I add a transition it seems to remove the backdrop from the dom a long time after the modal has closed (even though the transition time is 0.2s).

I was simply wondering how the modal or animate service decides how long to wait before removing the modal and backdrop from the dom and whether it is possible to manually change this. I've been trying to look through the code and found the setIsAsync() function and the function which waits till an animation is finished, but it seems to be the $animate service itself which is deciding how long to take in he "in-remove" and "ng-leave" stages and is calculating it to be too long.

[wesleycho]

Unfortunately, I don't think there is anything we can do here - all of the CSS transitions are handled by the browser, so this may just be a browser performance issue.

It is indeed $animate itself that determines when it is finished, so this is likely a problem best solved on the user side.

For now, I am closing this, but if you find a way to reproduce this and potentially isolate the culprit, I would be more than willing to take a look at this further.