Components: Mat-Dialog opening animation slow on Chrome

[lucabrasi83]

Bug, feature request, or proposal:

Bug: Mat-Dialog opening animation is laggy on Chrome. Tested with Firefox, Edge, Safari and no issue seen.

What is the expected behavior?

The opening of dialog should be as smooth on Chrome as other browsers

What is the current behavior?

Laggy Mat-Dialog opening animation

What are the steps to reproduce?

Stackblitz: https://stackblitz.com/edit/angular6-fast-dialog

Stackoverflow topic: https://stackoverflow.com/questions/50329776/angular-6-mat-dialog-slow-opening-with-chrome

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular CLI 6.0.1 / Angular Material 6.0.1

Is there anything else we should know?

[fxck]

Noticed this as well, for me it seems to get the slower the higher my browser window is. But then again, that makes sense I guess, more content to paint.

[fredericojesus]

The animation performance is very very slow, specially when you have an infinite scrolling list without virtual scrolling. When you have a lot of items rendered, it starts getting slower and slower. I just wanted to change to an opacity animation or just completely remove it.

[dadepra]

Hi guys, I Have The same issue here. This bug broken UI performance.

[hijamoya]

Same issue here, especially when open a dialog in a complicated page.

[btxtiger]

I am getting this only on Chrome Mobile when the keyboard opens immediately because of the embedded input field in the dialog.

[ngehlert]

also getting the same issue in chrome. are there any plans to fix this in the near future? or good workarounds?

[pshurygin]

Still an issue with 6.1.0-rc.3
When opening dialog for the first time on Chrome, the animation is really sloppy. After the first time it becomes smooth.
This is not an issue in the latest Firefox

[muralikrrish279]

Is there any update this issue? Its quite obvious mat dialog is slower in chrome for the first time load.

[abductedMind]

With further use of the component I am happy to say that the issue is present in a few specific use cases prominently on Macs particularly because of the high-dpi. Safari can handle it better but still chokes. Happy because the component is "acceptable" enough of the time that we will continue to use if for now.

The problem is that since what I say is true there may not be enough pressure or people seeing the issue to result in change. I seriously hope that the people tasked with this issue have or use a Mac and run their tests on a high-dpi monitor.

[nicolashenry]

It seems to be better after adding this in my case:

.mat-dialog-container {
    will-change: transform, opacity;
}

[schankam]

The problem is still present at the moment, and I hope it will be fixed soon. Like @abductedMind said, we will keep using it for the moment because it is usable, but it would be very nice if this could be fixed ASAP. All the other animations we are doing on our side are fluids and smooth, but the one on the Material Dialog is not, which make it pretty annoying. Please, I'm happy to use material but these kind of things are crucial, specially for a UI framework.

[rvalimaki]

@schankam do you use Material version 6 or 7? I have seen reports about Material 7 animations being much better.

We are still on Material 6 currently.

[schankam]

So some updates here: I've updated to Material 7 and the modal animation is now fast and smooth !

@rvalimaki Thanks for your comment, it helped :)

[rvalimaki]

@schankam yup, we also updated to Material 7 yesterday and the difference regarding dialog animation is like night and day. I was already checking how to disable animation altogether on some cases, but thanks to Material 7, that's not needed anymore.

[crisbeto]

Closing the issue since people are reporting that it's fixed. We also have an option now to disable the animation.

[lppedd]

@crisbeto What's the option?

[fxck]

I still find it pretty slow.

[ljunokas]

The problem is when you are using two animations at once - opening sidenav and backdrop transition. Quick fix is to put transition-delay on backdrops transition like 0.3s

[dlarr]

To me, the problem is not fixed. I noticed this sloppy behaviour with mat-tab-group

Here the blitzstack comming from https://material.angular.io/components/tabs/overview
https://stackblitz.com/angular/yrjaxnymmqk?file=app%2Ftab-group-animations-example.ts

Try to compare the slow animation in Chrome VS Firefox.

Firefox >>> Chrome here.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}