Simple menu doesn't close when clicked outside of the menu on mobile

What MDC-Web Version are you using?

 "@material/menu": "^0.2.6",

What browser(s) is this bug affecting?

Mobile Chrome and Mobile Safari on iOS

What OS are you using?

iOS 10.3.1

What are the steps to reproduce the bug?

1. Open this demo page on mobile Safari
2. click REVEAL MENU to open it
3. Tap anywhere outside of the menu. See that menu is not closed.

What is the expected behavior?

Menu should be closed when tapped outside. That is the behavior on Google Chrome on desktop.

What is the actual behavior?

When clicked outside of a menu, it is not closed, nothing happens.

[garrett-thompson]

Found out this is because iOS doesn’t emit a click event if the element you are tapping on isn’t considered “clickable”.

Workaround is setting all elements as “clickable”

@supports (-webkit-overflow-scrolling: touch) {
  /* CSS specific to iOS devices */
  * {
    cursor: pointer;
  }
}

[timv88]

Given that you’re listening for a click on the body to close a dropdown, it’s enough to specify cursor: pointer on the body alone

@supports (-webkit-overflow-scrolling: touch) {
  body {
    // fix event bubbling
    cursor: pointer;

    // prevent flashes when tapping the body 
    // you may also need to add this rule on other page wrapping elements depending on your markup
    -webkit-tap-highlight-color: transparent;
  }
}