mat-menu disappears after opening on mobile Safari

[adamdport]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Menus open and stay open until dismissed

What is the current behavior?

Menus open for a split second and then disappear

What are the steps to reproduce?

This is only on 7.0.0-beta.0, I need a starter stackblitz for that version. Any basic menu should reproduce it.

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

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

7.0.0-beta.0

Is there anything else we should know?

The issue goes away if you use lazy rendering, ie. ng-template with matMenuContent.

[crisbeto]

I wasn't able to reproduce it against our demo app on a device running iOS 11. You can fork this Stackblitz which is running the 7.0 beta. https://stackblitz.com/edit/angular-92bnjh-lzasmw

[adamdport]

Thanks for the starter. You're right, I couldn't reproduce it at first with the example from the docs. A menu with enough items to need a scroll bar does the trick though:

https://stackblitz.com/edit/angular-92bnjh-8nxizv

Breaks on my iPhone 7 on iOS11, let me know if it's not broken for you and I'll dig deeper.

[adamdport]

...just found #11677, I guess mine's a duplicate?

[kaziupir]

Iphone 5s chrome/safari same problem

[jelbourn]

Can anyone provide a reproduction?

[adamdport]

Can anyone provide a reproduction?

Sorry for the late response. I already posted a demo app that reproduces it. It looks like the "preview" function of stackblitz blows up on safari, so here's a direct link to the app that you can click from an iOS device: https://angular-92bnjh-8nxizv.stackblitz.io

As I said, it's on iOS11, it doesn't appear to be an issue on iOS12 (just released on the 17th). Angular Material supports the most recent two versions though, so it should be fixed. Thanks.

Edit: If you're testing it from a plus device, your screen might be big enough that it doesn't scroll (or break). You can either turn your device sideways or edit it to have more menu items

[crisbeto]

I think it may have less to do with the iOS version and more to do with the animation. I believe somebody else posted a similar issue where they said that it's not an issue in Material 7.0 since we use a much simpler animation.

[adamdport]

I tested the same link on two devices, one running iOS11 and the other iOS12. It worked on 12 and not 11. You gave me the starter stackblitz which uses Material 7 (albeit beta). So I guess this is a different issue?

[crisbeto]

I'm mostly guessing since I unable to reproduce it on my iOS11 device.

[adamdport]

You're using an actual device, not an emulator right? Here are some more details on my device, I'd be happy to provide any more details you think might be related:

• iPhone 6s 64GB Space Gray (AT&T) MKQ92LL/A
• Version 11.1.2 (15B202)
• Safari browser

[adamdport]

I was also successful at reproducing it in an iPhone 6s simulator running iOS 11.1.

[adamdport]

And also in an iPhone 6s simulator running iOS 11.4. Can you try either of those?

[jarmandoh]

problem is in OS not navigator "for me", all navigators run right, repeat "for me" in windows and android, even on macOS, but in Iphone does not work.

[am-awais]

any update!
same issue only in latest safari browser

[BovineEnthusiast]

Same issue here. Looks like it always works on the third click.

[jimmykane]

Hi this is a common issue plaguing iOS. you want a running app to reproduce this ?

[jimmykane]

Also it looks that happens with menus positioned closed to the edges of the screen

[Hanawa02]

Hi, same happens for my app. On the third click the menu stays open.

The bug only happens on iOs Phone, be it the installed app or the safari, simulators can't reproduce the problem.

My Project main Dependencies:

[greg-larson]

This is happening for me also and can be repoduced in the simulator.
iOS 12.4
iPhone 5s

Need to click 3 times to keep the menu open.
On angular / material 10.x