iOS Safari Change Tabs Swipe Gesture Affects `Modal` Component

[johndebord]

Steps to reproduce

I have no idea what's going on. It looks like the styling of Instagram is affecting my web app when tabbing back and forth. I've tested this on other websites and my web app works fine. I've attached a video of the behavior below.

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]

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

[johndebord]

I upgraded to iOS 17.5 and no longer have this issue

[johndebord]

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

[johndebord]

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