Choppy slide animation for mat-sidenav on mobile chrome

[pulsejet]

Bug, feature request, or proposal:

The animation for sliding in mat-sidenav (in over mode) on Chrome (latest) on older Android phones (reproducible on Xperia M5 E6633 with Android 6.0.0) is very choppy and slow

What is the expected behavior?

Animation should be smooth. Other sidenav libraries (at least those which use transform) are smooth.

What is the current behavior?

Choppy animation

What are the steps to reproduce?

A new project with Angular 6 and ng add ... sidenav-stuff ...

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

Angular, Material 6, TS 2.7.2, Chrome Android 66.0.3359.158

[paulstelzer]

Can confirm this. I created a complete new project, only Angular Material and CDK and if you open it on Chrome, is still not smooth anymore although no other scripts running. On a real example with data binding, changes and so on, there you can see it even better.

[irissoftworks]

We have a mobile first web app that is strictly made of OnPush components. As far as we see it Angular itself requires quite a bit of fine tuning even past the OnPush cd for it to achieve a decent performance on mobile devices - one needs to be really careful. Also, there are limitations of the cdk virtual scroll which make it really hard to use in certain circumstances, which makes things more painful.

We did some good work to optimize components and our application but this sidenav issue is really painful and it gets worse in screens with more bindings / changes happening.

Angular Material is a joy to work with development wise and we love that, but we would also love if users could navigate through our site using the hamburger without having their phones crashing all the time. It's really killing us :(

If anyone wants to reproduce this, just try it, don't even need to go mobile, throttle cpu using chrome devtools, turn on the profiler and check it out.

Is this such an edge case to be a P3, are there so few people using Angular for mobile first web apps ?

[husseinraoouf]

can confirm happen in angular 8 and material 8.0.1

[DibyodyutiMondal]

I am facing the same issue It's not even an old phone. It's a Moto Z2 Force with Android Oreo, with the latest Chrome browser

[mvnrhd]

Have been facing this issue since I started using cdk-virtual-scroll (7.3.0). It's a really bad UX, so any update here would be appreciated.

[ilyesbrh]

same for me angular 8 material 8.0.1 please fix it ASAP

[originals]

same problem here, very slow even with no content in the drawer

[vikash5529]

same problem here, very slow on safari
Angular Version 7 and angular material 7.3.7

[ghost]

same for me angular 8 material 8.0.1 still no fix?

[johnRambo2k14]

I can also confirm that I'm experiencing this too.

[raasmasood]

same issue its not smooth

[EliCDavis]

Not only is it choppy, it appears to be slowing down the rest of my application considerably (I have a WebGL canvas component)

[brendanowens]

This is happening for me on Safari (mobile and desktop) and any iOS browser

[theklayd]

problem still exist

<mat-drawer-container class="page-container" hasBackdrop="true">
 <mat-drawer #drawer mode="over" style="width:200px;">I'm a drawer</mat-drawer>
 <mat-drawer-content>
   <mat-toolbar color="primary"> <span>My Application</span> </mat-toolbar>
   <button mat-raised-button (click)="drawer.toggle()">Toggle drawer</button> 
 </mat-drawer-content>
</mat-drawer-container>

[Famin42]

same problem with LTS version of angular and @angular/material when I open site on different mobile devices (android, IOS, which browser doesn't matter)

[akotlar]

Any updates on this? I immediately noticed very choppy rendering in safari on desktop. In chrome things are better, but the slider circle lags behind the cursor significantly more than Material UI / React.