search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.52k stars 32.18k forks source link

iOS Safari Change Tabs Swipe Gesture Affects `Modal` Component #42229

Open johndebord opened 4 months ago

johndebord commented 4 months ago

Steps to reproduce

Minimal example code:

export default function App() {
  return (
    <SwipeableDrawer
      SlideProps={{
        sx: {
          height: "61.8%",
        },
      }}
      anchor="bottom"
      onOpen={() => {}}
      open
    >
      asdf
    </SwipeableDrawer>
  );
}

Your environment

iOS Version: 16.6.1 Model Name: iPhone 12 Pro Max

Search keywords: Style CSS JS Bleed

johndebord commented 4 months ago

https://github.com/mui/material-ui/assets/35586806/0ff0a77c-972f-4a44-af2d-355eb594d2ea

johndebord commented 4 months ago

I upgraded to iOS 17.5 and no longer have this issue

johndebord commented 4 months ago

Tested this again today, and I still have the issue even after upgrading to iOS 17.5

johndebord commented 4 months ago

Minimal example code:

export default function App() {
  return (
    <Modal open>
      <Typography>asdf</Typography>
    </Modal>
  );
}

The root cause of this issue appears to stem from the Modal component. Here's another video highlighting the problem.

https://github.com/mui/material-ui/assets/35586806/e88baf94-00af-4baa-841d-91a91d1193eb