There is a container that has position:fixed and takes up the entire screen size:
.overlay {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: blue;
}
The issue arises when scrolling down on mobile devices such as iPhones and Androids. As the address bar "shrinks" (i.e. window height increases), the height of .overlay remains constant, resulting in a blank space right below it until further scrolling.
An attempt was made to bind a window resize event in order to dynamically adjust the height of .overlay:
$(window).resize(function(){
$('.overlay').css("height", "100%");
});
However, this method did not have any effect. Any suggestions on how to solve this?