Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Choppy slide animation for mat-sidenav on mobile chrome

See original GitHub issue

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

Issue Analytics

State:
Created 5 years ago
Reactions:39
Comments:15

Top GitHub Comments

2reactions

brendanowenscommented, May 12, 2020

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

0reactions

Fomin2402commented, Jul 14, 2020

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)

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....

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...

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]`.

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> ...

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, ...