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]

RPReplay_Final1715660059.mov

[johndebord]

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

[johndebord]

After further testing, the styles do not bleed into another Safari tab. It was coincidental that the bottom navigation bar of Instagram shares the same height that the Modal moves up by when this issue appears.

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.

RPReplay_Final1715716280.MOV