37

Mobile Safari iOS 6.1.2では、次のことが起こります。

再現する手順

内部にposition: fixed要素を持つ要素を作成します。<input type="text">

実結果

  1. 入力 - 集中していない

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

  2. 入力 - 集中

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

    ライブデモを見る: http://jsbin.com/oqamad/1/

期待される結果

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

修正または回避策はありますか?

Safari に固定要素を適切に表示させる方法についての手がかりは役に立ちます。

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

4

3 に答える 3

8

これは、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;
}
于 2013-11-25T23:48:45.413 に答える
1

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

幸運を！

于 2013-05-16T03:25:03.390 に答える