On my website I have a drawer (a modal) containing form with inputs inside. And whenever user clicks on inputs browser tries to center them, but since a drawer is absolutely positioned, it scrolls underlying content instead and absolutely positioned element jumps. This thing happens on iOS devices, both chrome and safari.

Is there a way to fix it? Everything I found online so far doesn't work.

Here is a codesandbox https://codesandbox.io/s/small-water-v1m1tq

And here is a gif

Actually this is an old problem that I can't fix for a long time, but recently I noticed that notion has such modals, and they somehow managed to fix this issue.

This modal doesn't have top margin, but it doesn't matter. Changed the layout to be like theirs, but nothing helps. Here is a link: https://leather-colby-f69.notion.site/Job-Board-4323320545bb4484bfc1008cff34cebd