Material-ui: [Dialog] Scrolling touchable content does not work on Safari Mobile

Created on 21 Mar 2016  路  5Comments  路  Source: mui-org/material-ui

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).

file_000

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
bug 馃悰 Dialog external dependency wontfix
Source
picture nightlyop

Most helpful comment

Fast fix

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


   <List className={this.props.classes.smoothList}>
picture RichardLindhout on 5 Sep 2017
👍4

All 5 comments

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.

nightlyop picture nightlyop on 24 Mar 2016

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';
    }
Taakn picture Taakn on 6 Jun 2016
👍1

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.

oliviertassinari picture oliviertassinari on 28 Jul 2017

Related to https://github.com/callemall/material-ui/pull/8050

RichardLindhout picture RichardLindhout on 5 Sep 2017

Fast fix

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


   <List className={this.props.classes.smoothList}>
RichardLindhout picture RichardLindhout on 5 Sep 2017
👍4
Was this page helpful?
0 / 5 - 0 ratings

Related issues

anthony-dandrea picture anthony-dandrea  路  3Comments
rbozan picture rbozan  路  3Comments
reflog picture reflog  路  3Comments
ghost picture ghost  路  3Comments
newoga picture newoga  路  3Comments