Prevent scroll pull beyond extent of the item on iOS - html

Question

This might have been answered but I am really struggling to describe this issue.
On my website I have map div, a transparent slider div on top and non transparent info div below the transparent slider.
<div id="map"></div>
<div id="spacer"></div>
<div class="info"></div>
The css allows the info div to be slid over the map.
html {
overflow: hidden;
height: 100%;
}
body {
overflow: auto;
position: absolute;
height: 100%;
width: 100%;
margin: 0;
}
#map {
position: fixed;
width: 100%;
height: 90%;
}
#spacer {
width: 100%;
height: 90%;
}
.info {
z-index: 999;
position: absolute;
background-color: white;
width: 100%;
min-height: 100px;
box-shadow: 0px 0px 10px slategrey;
}
Here is a picture of the undesired effect.
It shouldn't be possible to pull the sliding div away from the bottom of the browser.
Is there a html & css solution?

Answer 1

I think what you are looking at here is a browser drawback, which can be overriden in safari under ios by using a non-standard webkit rule called -webkit-overflow-scrolling , you can find information about it here on MDN. I have ran into this issue numerous times in the past, but I can't remember finding a fix for it.
You can try this simple "hack" to bypass it, but I don't think this is a good idea though:
body.lock-position {
height: 100%;
overflow: hidden;
width: 100%;
position: fixed;
}
You can find more information about this issue here.