web-dev-qa-db-ja.com

固定された親内にフォーカスされたiOS入力は、固定された要素の位置更新を停止します

次のことが起こりますMobile Safari iOS 6.1.2

再現手順

position: fixed要素をその中に含む<input type="text">要素を作成します。

実際の結果

  1. 入力-フォーカスなし

    入力がフォーカスされていない場合、固定要素の位置は正しいです。

  2. 入力-フォーカス

    入力がフォーカスされると、ブラウザーは特別なモードに入り、固定要素（入力の親だけでなく、固定位置の要素）の位置を更新せず、入力を作成するためにビューポート全体を下に移動します。親要素は画面の中央に配置されます。

    ライブデモをご覧ください： http://jsbin.com/oqamad/1/

期待される結果

固定要素の位置は常に尊重されます。

修正または回避策？

Safariに固定要素を適切に表示させる方法についての手がかりがあれば役立つでしょう。

position: absoluteの使用とonscrollイベントハンドラーの設定を伴わない回避策を希望します。

ioscssinputfocusfixed
36
Valentin Agachi

IPadとiPhoneの両方のSafariでよく知られているバグです。

回避策は、固定位置で設定されたすべての要素に対して絶対位置に変更することです。

Modernizrを使用している場合は、次の方法でもモバイルデバイスをターゲットにできます。

jQueryコード

$(document).ready(function() {

  if (Modernizr.touch) {

      $(document)

        .on('focus', 'input', function(e) {
            $('body').addClass('fixfixed');
        })

        .on('blur', 'input', function(e) {
            $('body').removeClass('fixfixed');
        });

      }

});

[〜＃〜] css [〜＃〜]

たとえば、固定位置に設定されたヘッダーとフッターのみをターゲットにしたい場合、「fixfixed」クラスをボディに追加すると、固定位置のすべての要素に対して絶対位置に変更できます。

.fixfixed header, .fixfixed footer {
  position: absolute;
}
7
Alessandro Incarnati

はい、これは特にv5以降のiOSサファリの問題です。 iOSでChromeを使用すると、正常に動作することに気付くでしょう。これを修正するために使用する問題は、スタイル要素を作成して本体に追加し、その後削除してから要素に焦点を当てます。

これがなぜ機能するのか、私に聞かないでください、試行錯誤の時間が長すぎます！

また、これが最初に修正された後、後続の固定配置要素に対してスタイルトリックを実行する必要がないことに気付きました。

0
Richard Lailey

Position：Fixedには多くの既知のバグがあります。ここで確認できます： Remysharp article 。おそらく、あなたはまだこの質問からの回答を使用してそれらのいくつかを修正することができます： CSS“ position：fixed;” into iPad/iPhone？

幸運を！

0
Raspu