[Tabs] Automatically page scrolls to top when switching between some tabs

[hoangthau]

Bug, feature request, or proposal:

We found a bug. We had top content and a tab group below this content. And then we scrolled a little bit to bottom. We switched between some tabs. Now, page scrolled to top automatically.

It only occurs when we have top content on this page.

What is the expected behavior?

Page should keep scroll position when switching some tabs

What is the current behavior?

Page scrolls to top when switching some tabs

What are the steps to reproduce?

-Step 1: Scroll a little bit to bottom on page
-Step 2: Click on Tab 3
The page will scroll to top.

Demo here: https://stackblitz.com/edit/angular-wjtrxy

What is the use-case or motivation for changing an existing behavior?

A bug

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

Angular 5.0.3 - Material 5.0.2 - Window 10 - Typescript 2.4.2

Is there anything else we should know?

Thanks a lot!

[DanielPinkpank]

I have the same Issue.
And I noticed that the height of the "top content" seems to have an influence on this problem.
If you change the height to 900px for example, it doesn't scroll to top anymore.

[praveenpuglia]

Confirmed. Have the same issue.

[anshumansworld]

👍 same issue

[umimehar]

same issue

[umimehar]

Well the reason is when you change the tab, the next tab not have that much height of its inner contents so the parent height also decrease. thats why the its scroll to top. try the parent element height fixed like 1000px and then change tab, it will not scroll up. 👍

[umimehar]

https://stackblitz.com/edit/angular-wjtrxy-g4ksm6

Add a min-height="800px" to parent elemnt of mat-tab-group. :)

[hoangthau]

Thanks @umimehar. That's a good workaround.

[TolgaBA]

Seriously, why is there no clean solution to this existing problem starting from 2015!

[luchoman08]

.fill-available {
  min-height: min-height: stretch;
}

With this class called in the main container of the page worked for me, only in chrome not in mozilla.

[luchoman08]

Better -webkit-fill-available (tested on google chrome). Here is an example https://stackblitz.com/edit/angular-wjtrxy-x9shma

[Lakston]

None of the suggested solutions completely fix the problem for me, I still end up with some weird scrolling behaviors with a pixel min-height, stretch, fill-available...

edit: I modified @luchoman08 's stackblitz to reflect the problem:
https://stackblitz.com/edit/angular-wjtrxy-utgzn1

I removed some content from tab1 so now if you go to tab4 for example, scroll down a bit, then click tab1, the scrolling bug is still there, switch between those 2 for extra sea sickness effects.

[imransilvake]

still no solution for this? page shouldn't go up when click on the tab :/