Strange scroll-correction on mobile - html

Question

I have made a page that starts with a full (100% by 100%) image div.
This div will always fill up the page before scrolling.
Then I have another div with an image.
On desktop there is no problem.
However, on mobile when this page is loaded and I swipe my finger to give it a little scroll, then when the phone finished scrolling, it snaps / auto scrolls back a bit. It also appears to zoom-in a little.
I think it's due to the 100% on HTML and BODY tag, because if I remove that, then there is no scrolling correction.
I have tried this on several Android phones and always the same. How do I fix this? Here's the code.
<style>
* {
box-sizing: border-box;
margin: 0;
}
html, body {
height: 100%;
}
div {
width: 100%;
height: 100%;
}
div.first {
background-image: url("http://i.imgur.com/VWYl1EC.jpg");
background-attachment: fixed;
background-size: cover;
}
div.second {
background-image: url("http://i.imgur.com/PbV1Grl.jpg");
background-size: cover;
}
</style>
<div class="first"></div>
<div class="second"></div>

Answer 1

Problem is when the first div on a page has a height in %, this auto correction scroll will happen on Android phones.
The solution is to set the height in PX instead by using jQuery.
For example:
$('.firstdiv').css('height', $(window).height() + 'px');

Answer 2

use your css like following:-
<style>
* {
box-sizing: border-box;
margin: 0;
}
html, body {
height: 100%;
}
div.first {
max-width:100%;
background-image: url("http://i.imgur.com/VWYl1EC.jpg");
background-size: cover;
height:300px; /* as you needed */
}
div.second {
max-width:100%;
background-image: url("http://i.imgur.com/PbV1Grl.jpg");
background-size: cover;
height:300px; /* as you needed */
}