Material: menu: allows scrolling behind the menu on iOS

[adamdport]

md-menu is supposed to prevent scrolling behind the menu while the menu is open. On iOS however, users can scroll behind the menu. This can be reproduced on the md-menu demo site on the latest version (currently 1.1.0-RC.5).

This was found on Safari on iOS 9.3.2.

[bradrich]

This behavior is actually showing in multiple places and upon initial investigation has more to do with the md-scroll-mask not blocking touch events.

You can also see the issue on https://material.angularjs.org/latest/demo/panel by scrolling the content behind the dialog, as well as on https://material.angularjs.org/latest/demo/dialog by scrolling the content behind the tab dialog.

[bradrich]

This is an interesting issue that is larger than just the md-menu.

Currently, touch and wheel events are being caught by the md-scroll-mask element. However, several components have a md-backdrop added upon creation that is for an opaque styling and a click-catcher. This md-backdrop is 1 less z-index value than the component. In the case of md-menu which is 100 z-index, it is 99 z-index. The md-scroll-mask is 50 z-index and is responsible for catching the touchmove and wheel events, but is not getting hit at all.

Reference: https://github.com/angular/material/blob/master/src/core/util/util.js#L220

A possible solution is to disregard the md-scroll-mask element and allow the md-backdrop to handle all touch and mouse events. This being a larger issue, I have brought it up to the team.

cc: @ThomasBurleson, @DevVersion and @topherfangio.

[bradrich]

@adamdport Just a heads up. We are working on a fix for this issue. Please let us know if you have any questions.

[adamdport]

If an md-menu, md-select, etc is placed in a container that has a z-index higher than ~50, things break. My team is thinking about wrapping our md components in directives that accept z-index as an attribute to manage z-index manipulation of the backdrops. Being that you're knee-deep in this anyway, could you consider that as part of your solution?

[bradrich]

@adamdport We are actually working on a wide-spreading solution that will greatly reduce these issues. It is still in development, however.

[ErinCoughlan]

@adamdport It may be helpful to follow Issue #8475, which allows custom z-index values for all components.

[adamdport]

It's been a couple months—anything to report? If you have any idea when this will be released or in which version, that would be helpful for my team's planning. Thanks.

[marias-truelogic]

Hi, any update on this? It seems to still be hapenning in 1.1.3. Any known workarounds?

[fabienmoyon]

+1

[mikg2003]

I'm sure I'll get a response of essentially 'move to angular material 2', but was a fix ever implemented for this? Does anyone have a basic workaround?

[Splaktar]

@mikg2003 no, a fix for this has never been merged or released.