A basic example breaks in mobile safari with a white gap at the bottom when focus an input in the modal

[Albert-Gao]

Summary:

Steps to reproduce:

1. npx create-react-app my-app
2. yarn add react-modal
3. in index.css, add

.ReactModal__Overlay {
  background-color: blue !important;
}

4. in app.js

replace with this code:

import React from "react";
import Modal from "react-modal";

Modal.setAppElement("#root");

export default function App() {
  const [modalIsOpen, setIsOpen] = React.useState(false);
  function openModal() {
    setIsOpen(true);
  }

  function closeModal() {
    setIsOpen(false);
  }

  return (
    <div>
      <button onClick={openModal}>Open Modal</button>
      <Modal
        isOpen={modalIsOpen}
        onRequestClose={closeModal}
        contentLabel="Example Modal"
      >
        <button onClick={closeModal}>close</button>
        <form>
          <input />
        </form>
      </Modal>
    </div>
  );
}

5. yarn start
6. open on your iOS mobile Safari (iOS 13)
7. open modal, focus the input
8. scroll the page, a white bottom appears at the bottom of the page

Expected behavior:

No White space at the end

Additional notes:

Only in safari, iOS Chrome is fine

[andypande]

Hey @Albert-Gao , did you ever find a workaround for this? I'm seeing the exact same issue happen in my project