So I have an issue that has been bugging me for hours on end that is specific to Google Chrome browser on iPhone and iPads. I have made a simplified code example below. I have searched endlessly for how to deal with this issue. I am developing a site that users may leave active in a browser tab. The site has a fixed footer that stays at the bottom of the viewport. Upon initial loading of the site the fixed footer appears as it should at the bottom of the viewport. If you swipe to close or minimize the Chrome app, then next time you relaunch it, the footer now has been pushed below the viewport and you have to scroll down to make it visible. I'm assuming the height of the tab and address bar is having something to do with it. I thought if a div was positioned fixed at the bottom it would remain there. So what would cause it to load properly the first time and then get pushed down when the window hasn't been resized when relaunching Chrome? The code has no problems on a regular desktop or using Safari browser on iPhone or iPad but again it has no tabs at the top either. Would there possibly be a jquery or css calc solution?
CSS Styling & HTML
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
height: 100vh;
}
.header {
background:#ff0;
padding:10px;
}
.body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
.footer {
position:fixed;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}<div id="wrapper">
<div class="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>Codepen link:
Thanks to the comment from deblocker for discovering the answer to this problem. By completely removing the height property from the #wrapper div the footer now stays in its proper place.