search

mantinedev / mantine

A fully featured React components library
https://mantine.dev
MIT License
26.79k stars 1.9k forks source link

Modal window jumping on mobile when using selects (iOS only) #7012

Open rip32700 opened 3 weeks ago

rip32700 commented 3 weeks ago

Dependencies check up

What version of @mantine/* packages do you have in package.json?

7.13.2

What package has an issue?

@mantine/core

What framework do you use?

Next.js

In which browsers you can reproduce the issue?

Safari

Describe the bug

On Safari in iOS (simulator or real device), when clicking into a select that's rendered in a modal window, it inititally jumps, then stops after a couple clicks. See video

https://github.com/user-attachments/assets/91e067a2-9731-40dc-a9b8-075d7b8fcc1b

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

No response

Self-service

minosss commented 2 days ago

After testing, I think this is an old issue in iOS.

To reproduce this issue, the body element scrolling and switching focus input (Select or Text Input) in the modal are required. The focus changed, and the body scrolled up.

Set the width and height in mobile device

html, body {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
}

Or scroll in custom element.

<body>
  <MantineProvider>
     <main class="fixed-full-screen-and-scrollable">
       {children}
     </main>
  </MantineProvider>
</body>

Hope this helps