search

angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.32k stars 6.73k forks source link

mat-menu disappears after opening on mobile Safari #13130

Open adamdport opened 6 years ago

adamdport commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

kaziupir commented 5 years ago

Iphone 5s chrome/safari same problem

jelbourn commented 5 years ago

Can anyone provide a reproduction?

adamdport commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

adamdport commented 5 years ago

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:

adamdport commented 5 years ago

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

adamdport commented 5 years ago

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

jarmandoh commented 5 years ago

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 commented 4 years ago

any update! same issue only in latest safari browser

BovineEnthusiast commented 4 years ago

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

ezgif com-video-to-gif

jimmykane commented 4 years ago

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

jimmykane commented 4 years ago

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

Hanawa02 commented 4 years ago

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: image

greg-larson commented 4 years ago

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