bug(mat-expansion-panel): header position is incorrect when call elementInsideMatExpansionPanel.scrollIntoView(true)

[stargazer8tw]

Reproduction

• Components: https://angular-mat-expansion-panel-header-gone-after-scrollintoview.stackblitz.io

Steps to reproduce:

1. open StackBlitz reproduce example
2. scroll to bottom
3. click Test ScrollIntoView button.

or.

1. Add <span class="target">test</span> inside mat-expansion-panel tag.
2. Set mat-expansion-panel expanded="false".
3. Call elementInsideMatExpansionPanel.scrollIntoView(true), e.g. document.querySelector('.bug-target').scrollIntoView(true).

Expected Behavior

Viewport scrolls to mat-expansion-panel with mat-expansion-panel-header display, and element inside mat-expansion-panel remains hidden.

Actual Behavior

Viewport scrolls to mat-expansion-panel and causes mat-expansion-panel-header x-position changed and mat-expansion-panel-header is not display.

Environment

• Angular: 11.0.1
• CDK/Material: 11.0.1
• Browser(s): Chrome Version 87.0.4280.66 (Official Build) (64-bit)
• Operating System (e.g. Windows, macOS, Ubuntu): Windows, Ubutntu

Workaround

Call window.scroll or scrollTo function, see StackBlitz reproduce example

[crisbeto]

Double-checking that I understood the issue correctly: the problem you're reporting is that the header text disappears when pressing the Test ScrollIntoView, correct?

[stargazer8tw]

Yes, that's correct. The header text disappears when pressing the Test ScrollIntoView.

[crisbeto]

Better repro from #21622: https://stackblitz.com/edit/angular-yg9mb5.

[jazpearson]

We've just run into this ourselves....

[skantemneni]

I ran into this same issue on latest version of Angular Material...."@angular/material": "^16.1.3". Hope there is an answer. I defaulted to scrolling to just the Expansion Panel as a while. Not any particular element within.

[WaveBeat]

Would be nice to get a fix for this