Components: Menu positioning going wrong on scroll

[frmtlp]

Bug, feature request, or proposal:
Bug

What is the expected behavior?
Menu should stay where initiated

What is the current behavior?
Menu moves down, away from initiated position

What are the steps to reproduce?
https://stackblitz.com/edit/angular-gxkc8e

Click the menu and scroll down with displayed menu

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

Which versions of Angular, Material, OS, TypeScript, browsers are affected?
"@angular/core": "^6.0.0", "@angular/cli": "~6.0.1", "@angular/material": "^6.0.2", "@angular/cdk": "^6.0.2"

[lacolaco]

Any workaround for this?

[crisbeto]

Reopening since we had to revert the fix.

[sollenne]

Looks like @crisbeto has a PR open for this but it's been open for almost a month. Who's on PR duty this week? MERGE IT!

[jsdream]

@crisbeto This is quite a serious bug. Any possibility this can be fixed in the next release?

[crisbeto]

The PR is marked as being important, but it does affect a lot of components which makes it harder to merge.

[crisbeto]

Reopening because we had to revert the fix again. Fix is resubmitted as #12624.

[snakone]

Im using "@angular/material": "^6.4.7" issue still there on a fixed bottom nav

PD: seems like a Google Chrome issue, working well on other browsers

[vapits]

Same issue here but on ALL other browsers except Chrome.
If you open the menu and scroll the menu moves even outside the viewport.

[vapits]

The problem exists also in docs page.
But it is always replicaable if you host the menu in a fixed positioned item.

In that case the solution is to set position fixed to .mat-menu-panel and set the offset etc to your preferences. This is the way I solved it for my app.

[peterhogg]

I've found closing on scroll somewhat fixes the issue:
@ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;
window.addEventListener('scroll', this.scroll, true)

scroll = (): void => { this.trigger.closeMenu(); } };

[rezabayesteh]

I still have this problem in 7.3.3!

[jkon]

I am having this issue too. the more annoying part is that the menu doesn't show in the viewport at all if the user is scrolled down at all. So, @peterhogg 's workaround won't work in that case. It's been 18 days since the last comment and we all need a fix

[sebastianlaag]

Same issue here. When scrolling down on a mobile device the closed mat-menu pops up. Really very annoying. We are using Angular 7.2.2.

[harellevy]

using angular 7.2.6, angular material and cdk 7.2.0 works finally (i had to downgrade material and cdk to 7.2.0 to avoid the bug - in my case in MatTooltip positioning on the bottom part of the mobile screen.)

[AnshulMahajan10]

Upgraded to latest angular material and it worked

[angular-automatic-lock-bot[bot]]

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