safari - iOSiPadキーボードを開いたときに位置が崩れるのを修正

Question

[フォームの検索]テキストボックスフィールドをクリックすると、ヘッダーの位置が途切れる問題が修正されました。それは単にページの上部から切り離され（そこで固定されているため）、仮想キーボードが開くとページの中央に浮き始めます。

普通：

壊れた：

Answer 1

私たちの場合、これはユーザーがスクロールするとすぐに修正されます。これは、スクロールをシミュレートするために使用してきた修正です。

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

Answer 2

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

Answer 3

修正済み - 検索テキスト ボックスが入力されると、ヘッダーを相対的な修正位置に押し戻すハックが行われました。これは、ページがスクロール可能な場合にテキスト フィールドの固定位置が壊れるため、iOS 仮想キーボード実装のバグです。オーバーフローが非表示/ページがスクロールできない場合、仮想キーボードの実行時に固定位置が壊れません。

乾杯。