Input form input switch strange in mobile safari

Question

When switching between form inputs on a mobile safari, the cursor animates down and bounces in a strange way (do you use the arrow buttons or just click on the form itself)

Here is a link to a video about jumping in action

Answer 1

I assume this is a QuickType panel that causes the screen to resize the keyboard ... try adding this to your inputs.

<input autoCapitalize="off" autoComplete="off" autoCorrect="off" ... /> 

Answer 2

The soft keyboard changes the height of the screen, because when you enter the User ID , forecast fields are displayed, on the contrary, they are hidden when you enter Password - because passwords have no suggestions.

You need to align the container of the entry area below, so when the size of the viewport changes, the container slides up — staying aligned from the bottom — and there is no bounce effect.

In css something like:

 .container{ position: absolute: bottom: 0; }