angular / angular/components

Choppy slide animation for mat-sidenav on mobile chrome

Open
#11,526 16 comments 40 reactions 0 assignees View on GitHub
area: material/sidenav P3 perf
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

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

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue in a new Angular 6 project using mat-sidenav in over mode on Chrome for Android, preferably with the reported Xperia M5 environment. Start by examining the mat-sidenav animation path and compare its behavior with transform-based implementations. Done means the sidenav animation is smooth on the reported older Android device without regressing other modes.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend, performance
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.