Website jumps around when virtual keyboard is up
I have a login page. ( used in full screen mode like a PWA. Added to home screen )
When the user clicks on one of the input boxes the virtual keyboard pops up. When the user finishes typing the username he either wants to click away from the box to be able to click to the login button or wants to click to the password input box. When the user clicks away the virtual keyboard hides but bring the page with itself to the bottom. And if the user clicks again, the website jumps back to it's normal position.
I have included a gif demonstrating the problem. and here is a codepen link: https://codepen.io/drrandom/pen/eYLbBdq
I have the same problem on other pages, where this exact same problem occours on any input field on mobile.
I have tried different viewports for the body and several meta tags. Tried dvh, vh, and svh body heights. I don't know what should i do.
When the user clicks on one of the input boxes the virtual keyboard pops up. When the user finishes typing the username he either wants to click away from the box to be able to click to the login button or wants to click to the password input box. When the user clicks away the virtual keyboard hides but bring the page with itself to the bottom. And if the user clicks again, the website jumps back to it's normal position.
I have included a gif demonstrating the problem. and here is a codepen link: https://codepen.io/drrandom/pen/eYLbBdq
I have the same problem on other pages, where this exact same problem occours on any input field on mobile.
I have tried different viewports for the body and several meta tags. Tried dvh, vh, and svh body heights. I don't know what should i do.
