[SwipeableDrawer] Not scrolling content when anchor="bottom" on mobile

[andresebr]

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

In mobile, scrolling content within a SwipeableDrawer set with anchor='bottom' doesn't work at all. This only happens in mobile browsers.

Expected Behavior 🤔

Drawer content should be scrollable if the screen height is not big enough, no matter the anchor value.

Steps to Reproduce 🕹

Steps:

1. Go to https://andresbarreto.net using a mobile browser with a device that meets theme.breakpoints.down('sm') (default breakpoint values were not modified).
2. Tap on any image in the projects section (bottom of the page).
3. Put the device in landscape orientation (to force the content to be larger than the height of the screen)
4. Try to scroll content.

Following the same steps, the issue can also be reproduced with the Swipeable Temporary Drawer -> open bottom example on the demo page.

Context 🔦

Noticed that scrolling content is not an issue when the anchor is set to 'left' or 'right'.

Just in case, here's how I have set up the drawer in my project:

const isSmScreen = useMediaQuery(theme.breakpoints.down('sm'));
const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent);

// ...

  if (isSmScreen) {
    return (
      <SwipeableDrawer
        anchor="bottom"
        open={open}
        onClose={handleClose}
        onOpen={handleOpen}
        disableBackdropTransition={!iOS}
        disableDiscovery={iOS}
        aria-labelledby={selected.title}
      >
        {projectContent}
      </SwipeableDrawer>
    );
  }

Your Environment 🌎

Tech	Version
Material-UI	v4.3.1
React	v16.9.0
Browser	Chrome & Safari (Mobile)

[oliviertassinari]

@andresebr I can confirm the issue. The component doesn't check the scroll handlers in the drawer. This issue is most visible with the anchor top and bottom, but it's also present with the other anchor variants. I had to solve this very same issue 3 years ago in react-swipeable-views.

This is relatively simple to handle: https://github.com/oliviertassinari/react-swipeable-views/blob/1242299baceea36925cc98deb688d6d2e315f464/packages/react-swipeable-views/src/SwipeableViews.js#L473-L479, in case you want to submit a pull request :).

[kamami]

This issue still persists, even the demo on material-ui.com does not scroll if max-height is set in developer tools for demonstration.

[oliviertassinari]

@kamami see #22100

[VladSez]

@oliviertassinari Hi! Seem's like an issue still persist on mobile when using SwipeableDrawer anchor="bottom" and anchor="top". I have tested on Android Chrome and iOS Safari and i couldn't scroll a content. Repo i have tested: https://codesandbox.io/s/material-demo-forked-8o4od?file=/demo.js

iOS Safari https://user-images.githubusercontent.com/16666234/106383322-45322f00-63d6-11eb-9a04-bc02e933ccb9.MP4

Android Chrome

https://user-images.githubusercontent.com/16666234/106383439-02bd2200-63d7-11eb-8f2b-b76bc426d3cb.mp4

[oliviertassinari]

@VladSez It was fixed on v5: https://codesandbox.io/s/material-demo-forked-rqfjv?file=/package.json. Please always try the most recent version.

[JeffinJ]

@VladSez It was fixed on v5: https://codesandbox.io/s/material-demo-forked-rqfjv?file=/package.json. Please always try the most recent version.

if overflow is set to visible we cant scroll inside the swpieabledrawer. We cant show the top of the drawer on the screen with a puller if we didn't set overflow to visible. This is frustrating

[crslegend]

@VladSez It was fixed on v5: https://codesandbox.io/s/material-demo-forked-rqfjv?file=/package.json. Please always try the most recent version.

Hi! May I know if there will be any fixes applied to v4? I have a project that is currently using v4 and it can be quite a huge change to migrate to v5 just because of this issue

[pablo-mayrgundter]

I have a fix working:

https://github.com/buildrs/Share/blob/2ddbf31e00fcd7d409df6beb9afffb08929485a2/src/Components/MobileDrawer.jsx

I made it a persistent variant and set a couple of the properties conditionally on isOpen or not.. see L54 and L72.

[mcsimps2]

@JeffinJ My workaround was to created a nested div with overflow: auto or overflow: scroll so that it wasn't affected by the overflow: visible on the parent Paper element. Just make sure to the inner div height: 100%.

<SwipeableDrawer
    anchor='bottom'
    swipeAreaWidth={height}
    disableSwipeToOpen={false}
    ModalProps={{ keepMounted: true }}
    PaperProps={{
        sx: {
            // Since overflow is visible here and not 'auto' or 'scroll', the scrolling needs to happen in a nested div
            overflow: 'visible',
            height: `calc(90% - 73px)`
        }
    }}
>
    <Box
        sx={{
            bgcolor: 'white',
            position: 'absolute',
            top: '-73px',
            visibility: 'visible',
            right: 0,
            left: 0,
            height: '73px'
        }}
        alignItems='center'
    >
        Foobar
    </Box>
    <Box height='100%' overflow='auto'>
        <MyList />
    </Box>
</SwipeableDrawer>
);