[Dialog] Scrolling touchable content does not work on Safari Mobile

Problem Description

I’m having a scrollabale (don’t think that it matters) page with an overlaying Dialog. The Dialog contains a List, which is also scrollable. The List element contains ListItems and Dividers. When I try to scroll the list, the item on which my finger is placed, is marked gray (selected). When moving the finger, the list does not scroll but the rest of the page, which is overlayed by the dialog, is pulled down. As you can see on the print screen, the page is pulled down like it can be done for refreshing. The annoying thing is, that sometimes it works as intended but most times the overlayed content is pulled down (don’t know what the reason therefore is).

~~Possible solution? http://www.two-legs.com/2012/07/html5-native-scrolling-on-iphone-ios5/~~

Update: Looks like the list causes the problem. There is no problem when rendering only plain text in the dialog body.

Update 2: The problem might be caused by onTouchTap of the ListItems. When using inactive content (i.e. removing onTouchTap or disabling it using the property disabled: true), scrolling works just fine.

Versions

• Material-UI: 0.14.4, 0.15.0-alpha.2
• React: 0.14.7
• Browser: Safari 9 on iOS 9.2 (iPad mini); problem does not appear on Android and desktop devices

[RichardLindhout]

Fast fix

const styles = theme => {
  return {
    smoothList: {
      overflowScrolling: 'touch',
      WebkitOverflowScrolling: 'touch',
    }
}

   <List className={this.props.classes.smoothList}>

[Taakn]

When the dialog pops up, it sets the background to overflow: hidden. However that’s not enough and it should set background to fixed. Something like this fixed it for me in render:

    var html = document.getElementsByTagName("html")[0];
    if (this.props.open==true) {
      html.style.position = 'fixed';
    } else {
      html.style.position = 'static';
    }