Scrollable MatMenu disappears on Mobile Safari just after open animation
See original GitHub issueBug, 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.
Issue Analytics
- State:
- Created 5 years ago
- Reactions:17
- Comments:26 (1 by maintainers)
Top GitHub Comments
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
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:
And here is the way how is written on the official examples from https://material.angular.io/components/menu/examples
You can notice that the trigger has to be declared before the menu.