iOS iPad фиксированное положение разрывается при открытии клавиатуры

в нашем случае это будет исправлено, как только пользователь прокручивает. Итак, это исправление, которое мы использовали для имитации прокрутки:

$(document).on('blur', 'input, textarea', function () {
    setTimeout(function () {
        window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
    }, 0);
});

вот хаки решение с помощью jQuery:

HTML:

<label for="myField">My Field:</label> <input type="text" id="myField" />

<!-- ... other markup here .... -->

<div class="ad_wrapper">my fixed position container</div>

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');
    });
});

все решения, которые я пробовал до сих пор не удалось один сценарий для меня: фиксированная верхняя панель навигации исчезнет, как только клавиатура отображается на iPhone. Что делать, если вы хотите, чтобы фиксированный элемент оставался фиксированным в том же положении, даже когда отображается клавиатура? Ниже приведено простое решение, которое позволяет это, с бонусом сохранения фиксированного элемента, прикрепленного к верхней части, когда вы прокручиваете страницу, пока клавиатура видна (т. е. с фокусом все еще внутри ввода поле.)

// Let's assume the fixed top navbar has id="navbar"
// Cache the fixed element
var $navbar = $('#navbar');

function fixFixedPosition() {
  $navbar.css({
    position: 'absolute',
    top: document.body.scrollTop + 'px'
  });
}
function resetFixedPosition() {
  $navbar.css({
    position: 'fixed',
    top: ''
  });
  $(document).off('scroll', updateScrollTop);
}
function updateScrollTop() {
  $navbar.css('top', document.body.scrollTop + 'px');
}

$('input, textarea, [contenteditable=true]').on({
  focus: function() {
    // NOTE: The delay is required.
    setTimeout(fixFixedPosition, 100);
    // Keep the fixed element absolutely positioned at the top
    // when the keyboard is visible
    $(document).scroll(updateScrollTop);
  },
  blur: resetFixedPosition
});

чтобы увидеть демо, перейдите сюда на вашем iPhone:

http://s.codepen.io/thdoan/debug/JWYQeN/gakeYJYOXDPk

вот версия с помощью requestAnimationFrame, но он, похоже, не работал лучше, поэтому я застрял с первой версией, так как это проще:

http://s.codepen.io/thdoan/debug/VpvJNX/yYMyLDLBwpRk

что вам нужно сделать, это установить положение тела фиксируется, когда пользователь редактирует текст, а затем восстановить его на статический, когда пользователь будет сделано. Вы можете сделать это либо при фокусировке/размытии (показано ниже), либо, если пользователь открывает модальный, вы можете сделать это при модальном открытии/закрытии.

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

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

исходя из этого хороший анализ из этой проблемы, я использовал это в html и body элементы в css:

html,body{
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
    height: 100% !important;
}

он отлично работает для меня.

исправлено-сделал Хак вокруг, чтобы подтолкнуть заголовок обратно в относительное положение фиксации после ввода текстового поля поиска. Это ошибка в реализации виртуальной клавиатуры iOS, поскольку она нарушает фиксированные позиции в текстовых полях, если страница прокручивается. Если переполнение скрыто / страница не прокручивается, то она не будет нарушать фиксированные позиции при выполнении виртуальной клавиатуры.

Ура.