Scrollable MatMenu disappears on Mobile Safari just after open animation

Bug, feature request, or proposal:

Bug.

What is the expected behavior?

MatMenu should appear and stay on screen after opening.

What is the current behavior?

MatMenu shows, but just after the fade in animation ends, it becomes invisible. It’s still there, and you can still select items, but it’s invisible.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-xf5tdi?file=app%2Fmenu-overview-example.html Above example is taken from the official documentation, but instead of two items there are sixteen now.

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

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

This happens (at least) on iOS 11.2. with Angular 6.0.3, Angular-Material 6.2.0 and Mobile Safari

Is there anything else we should know?

It appears to be Mobile Safari’s fault. Changing .mat-menu-panel style to overflow: initial and then back to overflow: auto fixes the issue (that’s the workaround I’m using). I’m reporting this here anyhow, since Apple updates their browser once a year at most.

[abeymg]

This is affecting our app as well. Update: Using the lazy rendering feature as mentioned in the issue below seems to resolve it

https://github.com/angular/material2/issues/11366

[closca]

Hi, I faced the same issue as the other guys. Mat-menu doesn’t stay open on the first tap. I started to look around and check the solutions listed in this thread, and indeed the fix with overflow did work but I didn’t consider as good enough to achieve the best User Experience (was flickering). Therefore, I decided to get back to basics, and I was wondering if the official examples face the same issues as we did. They work just fine. From this point was necessarily just a second to see what I was doing wrong. Here is the way how I was writing the HTML:

<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>
<button mat-button [matMenuTriggerFor]="menu">Menu</button>

And here is the way how is written on the official examples from https://material.angular.io/components/menu/examples

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

You can notice that the trigger has to be declared before the menu.