angular/components

bug(scrollPositionRestoration): adding angular material to a project causes a bug with scrolling.

KostyaTretyak opened this issue · 5 comments

KostyaTretyak commented

Description

If you install the default Angular project and then add default Angular Material to it, you can see a bug with scrolling.

Reproduction

Steps to reproduce:

Step 1:

ng new mat-scroll-bug --routing

Step 2:

In AppRoutingModule setup this:

RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled' }),

Step 3:

Create a component with one paragraph of content.

Step 4:

Create second component with own path and long page. Go to first component and create link to this second component.

Step 5:

Start the application, open first component and click link to second component (with long page).

Step 6:

Press "back" button on the browser and then press "forward" to go back to the long page.
For now, Angular scrolling to bottom as expected.

Step 7:

ng add @angular/material

Step 8:

Press "back" button on the browser and then press "forward" to go back to the long page.
For now, Angular scrolling, but not at the bottom.

Related info

GIF

mat-scroll-bug

Expected Behavior

Angular should scrolling to the bottom of page.

Actual Behavior

Angular scrolling, but not at the bottom.

Environment

Angular CLI: 13.2.3
Node: 16.13.2
Package Manager: yarn 1.22.1
OS: linux x64

Angular: 13.2.2
... animations, cdk, common, compiler, compiler-cli, core, forms
... material, platform-browser, platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1302.3
@angular-devkit/build-angular 13.2.3
@angular-devkit/core 13.2.3
@angular-devkit/schematics 13.2.3
@angular/cli 13.2.3
@schematics/angular 13.2.3
rxjs 7.5.4
typescript 4.5.5

andrewseguin commented

Thanks for the issue @KostyaTretyak - I don't see what problem Material may be adding. Can you also provide a stackblitz showing what it looked like before adding Material? That would make it easier to identify the difference between the two

KostyaTretyak commented

@andrewseguin, I just saw that this bug appears after adding BrowserAnimationsModule to the project. This is exactly what happens with the ng add @angular/material command. So the problem, really, is not in the material.

KostyaTretyak commented

By the way, NoopAnimationsModule has same issue. So, any @angular/material user who uses Google Chrome will have this bug.

angular-automatic-lock-bot commented

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.