Choppy slide animation for mat-sidenav on mobile chrome
See original GitHub issueBug, 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
Issue Analytics
- State:
- Created 5 years ago
- Reactions:39
- Comments:15
Top Results From Across the Web
Animations lagging on mobile chrome - Stack Overflow
When viewed on desktop, the animations work well. However when viewed on mobile, specifically on my chrome browser, there is a weird lag....
Read more >How To Improve The Sidenav Animation Performance Angular ...
The animation for sliding in matsidenav in over mode on Chrome latest on older ... and mobile designing comps is becoming far too...
Read more >angular/material/_theming.scss - UNPKG
15, // Default backdrop animation is based on the Material Design swift-ease-out. ... Chrome can be included by checking for the `html[hc]`.
Read more >Sidenav - Angular Material
UI component infrastructure and Material Design components for mobile and desktop ... To set up a sidenav we use three components: <mat-sidenav-container> ...
Read more >material theming SCSS - Apigee Docs
Chrome can be included by checking for the `html[hc]` * attribute, however Chrome ... $mat-linear-out-slow-in-timing-function: cubic-bezier(0, 0, 0.2, ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
This is happening for me on Safari (mobile and desktop) and any iOS browser
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)