This issue is only can be seen at the mobile Chrome since the mobile keyboard needs to pop up .
Whenever I switch the focus of my input from the 4 input boxes at the modal (whenever I change the place of the cursor inside the input box, like for example when you place a cursor at input box #1 from the input box #3 that is at the bottom of the input box #1), you can see the boxes juddering up and down.
What is causing this issue and how to solve this (no shaking up and down when I change the focus) with those 4 inputs boxes placed at center horizontally and vertically?? Do I have to use Javascript for this to resolve the issue or it can be solved by only css?
The sample code is at https://codesandbox.io/s/condescending-rhodes-uyv7wn and you should test the code at Chrome mobile through https://uyv7wn.csb.app/ which is hosted from the codesandbox.
I solved the issue by changing the input type from text to search and now it's working stable without juddering.