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

[nightlyop]

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

[nightlyop]

I tried some workarounds and the only working solution that i came up with is a custom list item:

JavaScript:

let listItem = (props) => {
    return <div className="listItem" key={ props.key } onTouchTap={ props.onTouchTap } >
        <div className="listItem-content">
            <span className={`listItem-content-icon ${ props.iconClassName }` } />
            <div className="listItem-content-text">
                { props.primaryText }
            </div>
        </div>
    </div>;
};

CSS:

.listItem {
    border: 10px;
    background: none;
    display: block;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.87);
    font-size: 16px;
    line-height: 16px;
    position: relative;

    &-content {
        margin-left: 0;
        padding: 16px 16px 16px 72px;
        position: relative;

    &-icon {
        position: absolute;
        font-size: 24px;
        display: block;
        height: 24px;
        width: 24px;
        top: 0;
        margin: 12px;
        color: #757575;
        fill: #757575;
        left: 4px;
    }
}

I tried to make the ripple effect with

• Replacing the div with the class listItem with a FlatButton -> Scrolling doesn't work
• Replacing the div with the class listItem with a EnhancedButton -> Scrolling doesn't work
• CSS Ripples according to https://ghinda.net/article/css-ripple-material-design/ --> ugly and doesn't work properly either

So I don't have the ripple at the moment. I hope somebody can come up with a fix or a better workaround.

[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';
    }

[oliviertassinari]

As far as I know, this is an issue of iOS Safari. I don't think that we can do much about it.
You can see the same issue on the Bootstrap docs.

[RichardLindhout]

Related to #8050

[RichardLindhout]

Fast fix

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

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