When you scroll the page and dismiss the keyboard while the page still scrolls, the header does not return to its fixed position. If you tap a link or button, the header shows up somewhere in the (vertical) middle of the screen and only returns to its fixed position after manually scrolling.Solution:
if( /iPhone|iPod|iPad/i.test(navigator.userAgent) ) {
$(document).on(‘focus’, ‘input, textarea’, function()
{
$(‘header’).css(“position”, ‘absolute’);
$(‘footer’).css(“position”, ‘absolute’);
});
$(document).on(‘blur’, ‘input, textarea’, function()
{
$(‘header’).css(“position”, ‘fixed’);
$(‘footer’).css(“position”, ‘fixed’);
});
}
The above “unfixes” the header/footer while an input field is focused.