Dialog(Modal) keeps jumping when opened and closed on mobiles

[gmcamposano]

As you can see, every time i open the modal using "mas info" this happens:
VIDEO:

video.mp4

Code:

//modal.js

'use client'
import { Dialog, Transition } from '@headlessui/react'
import { Fragment } from 'react'
import { AiFillPhone, AiOutlineWhatsApp, AiOutlineClose } from 'react-icons/ai'
import { IoLocationSharp } from 'react-icons/io5'

export default function Modal({ isOpen, closeModal, data, children }) {
  const doctor = data && data[0]

  return (
    <>
      <Transition appear show={isOpen} as={Fragment}>
        <Dialog as="div" className="relative z-20" onClose={closeModal}>
          <Transition.Child
            as={Fragment}
            enter="ease-out duration-300"
            enterFrom="opacity-0"
            enterTo="opacity-100"
            leave="ease-in duration-200"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
            <div className="fixed inset-0 bg-black bg-opacity-25" />
          </Transition.Child>

          <div className="fixed inset-0 overflow-y-auto">
            <div className="flex min-h-full items-center justify-center p-4 text-center">
              <Transition.Child
                as={Fragment}
                enter="ease-out duration-300"
                enterFrom="opacity-0 scale-95"
                enterTo="opacity-100 scale-100"
                leave="ease-in duration-200"
                leaveFrom="opacity-100 scale-100"
                leaveTo="opacity-0 scale-95"
              >
                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
                  <div className="absolute right-4 text-xl drop-shadow-sm">
                    <button
                      type="button"
                      className="text-gray-400 hover:text-gray-500"
                      onClick={closeModal}
                    >
                      <AiOutlineClose />
                    </button>
                  </div>
                  {data?.length > 0 ? (
                    <>
                      ... dialog info
                    </>
                  ) : (
                    <>{children}</>
                  )}
                </Dialog.Panel>
              </Transition.Child>
            </div>
          </div>
        </Dialog>
      </Transition>
    </>
  )
}

home.js

'use client'
import Modal from './modal'
import { demo } from './demo'
import { useState } from 'react'

export default function ConoceLosEspecialistas() {
  const [isOpen, setIsOpen] = useState(false)

  function openModal() {
    setIsOpen(true)
  }

  function closeModal() {
    setIsOpen(false)
  }

  return (
    <>
      <Modal
        isOpen={isOpen}
        closeModal={closeModal}
        openModal={openModal}
        setIsOpen={setIsOpen}
        data={filteredPeople}
      />
      <div className="bg-white py-16 md:py-24 scroll-mt-12" id="doctores">
   ...data
          <ul
            role="list"
            className="mx-auto mt-20 grid max-w-2xl sm:grid-cols-2 place-content-center gap-x-10 md:gap-x-28 gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-3"
          >
            {demo.map((person) => (
              <li key={person.name} className="max-w-xs mx-auto">
                
                  <button
                    onClick={() => {
                      openModal()
                    }}
                  >
                    Más info
                  </button>
                </ul>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </>
  )
}

[ludo237]

I've the same issue not in mobile but on any web browser

[gmcamposano]

if is mostly affected if you have smooth scroll enabled

[Emiliano-Bucci]

Is there a reason why this library scroll when the dialog is opened? This is also creating issues on iOs when animating with react-spring.