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

Here's a hacky solution using jQuery:

HTML:

My Field: 



my fixed position container

CSS:

.ad_wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background-color: rgba(0,0,0,0.75);
    color: white;
    text-align: center;
}
.unfixed {
    position: relative;
    left: auto;
    bottom: auto;
}

JS:

$(function () {
    adWrapper = $('.ad_wrapper');

    $(document).on('focusin', 'input, textarea', function() {
        adWrapper.addClass('unfixed');
    })
    .on('focusout', 'input, textarea', function () {
        adWrapper.removeClass('unfixed');
    });
});