Layout using vh does not scale with zoom - css

Question

I've tried to create a login form using ONLY vh sizes.
Doing this, in the hopes that the form, in all, would scale accordingly to the viewport.
It doesn't! For some reason zooming in, creates a blank space that keeps getting bigger the more you zoom, between the input fields and the text below.
http://jsfiddle.net/TnY3L/
The fiddle isn't very well made, just copied it from my project.
But you can see what's wrong - and that's what counts.
Anyone have any idea as to how I were to go about fixing this?
<span id="loginform">
<input type="text" name="login" class="LFORM" placeholder="USERNAME" />
<input type="password" name="password" class="LFORM" placeholder="PASSWORD" />
<button id="LB" type="button" style="font-size: 1.4vh;">OK!</button><br />
Create account
Forgot login?
</span>
::-webkit-input-placeholder {
font-size: 1.4vh;
}
#loginform {
float: right;
position: relative;
top: 50%;
transform: translateY(-50%);
right: 1.5vh;
}
#CALINK {
float:left;
font-family:my_fat_font;
}
#FLLINK {
float:right;
font-family:my_fat_font;
}
#LB {
border-radius: 0.4vh;
font-family: my_fat_font;
color: #ffffff;
background: #ff9f2d;
padding: 0.2vh 0.8vh 0.2vh 0.8vh;
text-decoration: none;
border: none;
height: 2vh;
margin-left: .5vh;
margin-right: 0px;
border: 0;
}
#LB:hover {
background: #3e4188;
text-decoration: none;
}
.LFORM {
width: 10vh;
height: 1.8vh;
border-radius: .3vh;
border: none;
padding-left: .6vh;
}
[placeholder]:focus::-webkit-input-placeholder {
color: transparent;
}
#loginform a:hover {
color: #ff9f2d;
text-decoration:underline;
}
#loginform a {
color: #ff9f2d;
text-decoration: none;
}

Answer 1

The vh and vw units are a measurement relative to the viewport size. 1vh is 1% of the current viewport height, so 100vh is always 100% height. No matter how much you zoom in and out, the viewport is still the same size.
When you zoom in, you scale up the entire document (but not the viewport). It's logical that the space between elements increases as you zoom in the page, if that space is not defined in viewport units as well. Because the other elements don't increase it takes the document out of proportions.
If you want to create elements that scale as you zoom in, try using the rem unit. This is relative to the body's font size, so as you zoom the page in every value expressed in rem will scale accordingly.

Answer 2

vh and vw properties are bound to the the viewport size.
Many browsers (e.g. Chrome) behave in a way that when a browser is zoomed by user's action using browser's built-in zoom functionality vh and vw values are changed considerably.
But if you use css zoom property vh and vw remain the same.
If you need to take over this limitation you can set CSS variable according to your zoom level in CSS.
html {
zoom: 90%; /* zoom your page to 90% */
}
:root {
--zoom: 0.9; /* set the variable saying what the current zoom is */
}
And when using vh and vw units calculate it like this:
width: calc(100vw / var(--zoom));