iOS iPad Fixed position breaks when keyboard is opened

Question

Fixed position breaks on header when I click on the \"Search Form\" text box field. It simply detaches from the top of the page (as it\'s fixed up there) and starts floating

Answer 1

What you need to do is set the position of the body to fixed while the user is editing text and then restore it to static when the user is done. You can do this either on focus/blur (shown below), or if a user is opening a modal, you can do it on modal open/close.

$("#myInput").on("focus", function () {
    $("body").css("position", "fixed");
});

$("#myInput").on("blur", function () {
    $("body").css("position", "static");
});