每当我更改输入的焦点时，是什么导致这些输入框从这个简单的模式中抖动（仅在 chrome mobile 上）？

Question

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.

Answer 1

I solved the issue by changing the input type from text to search and now it's working stable without juddering.