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.
14 Replies
no one? 😦
It's the weekend.
Normally I'd jump in but am having some wines and my advice may not be useful
your codepen link doesn't work, you have to save the codepen and the URL needs to have a unique key in it before it'll show us what you're seeing.
At a random guess though, you're probably using
vh and that is a different unit depending on whether the browser navbar is shownOh i see. Edited the link https://codepen.io/drrandom/pen/eYLbBdq
Well, I'm using vh. I will try it with dvh!
It is jumping with dvh too.
As you can see, it is good on the first click. I click to the username input and it jumps up. It's ok since i want to see what iam typing. As soon as i start to type it jumps down and if i click to an empty space it jumps all the way up and if i click again it jumps to place
try using
svh or lvh instead, though in general I find it easier to avoid them altogetherWell. the method i use to center everything is that my body should be display as flex. And just center everything. It requires that the body must be 100% height of the viewport. How could i avoid using svh or lvh or dvh?
Have you tried 100%? Or for mobile you can use vmax in a media query.
Looks kind of like the browser is treating the same n screen keyboard as an extension on the viewport when it scrolls down.
I’d try something like
Telling the browser that this should only ever be able to get as big as the smallest version of this viewport’s height.
if "on mobile" means iOS (Safari), than that's a known issue with elements getting focus.
there is a CSS prop that prevents that jump and zoom, but I can't recall its name.
Nop. On safari mobile it works fine. On Android it is jumping in every browser.
Will try that. Thank you!
Tomorrow I will try svh and 100% only
Thank you for the suggestions!
Well, not working