web-dev-qa-db-ja.com

iOS8の新しい修正された位置のバグ

固定ヘッダーとスライドアウトサイドバーのあるサイトがあります。 iOS7が縦向きの場合、サイドバーが表示されているときは固定ヘッダーは固定されたままですが、iOS8では、スクロールダウンの距離に応じてヘッダーがわずかに上に押し上げられます。固定する必要があります。

このjsbinを参照してください： http://jsbin.com/xuyevi/2/

主な部分は、ヘッダー、サイドバー、およびメインコンテンツです。ヘッダーは固定位置を使用して画面の上部に固定され、スクロール時にコンテンツの上にヘッダーを保持するz-indexがあります。

サイドバーは画面の左側に固定されており、最初は独自の幅で左に移動することで非表示になります。

サイドバーを開くには、ヘッダー、コンテンツ、およびサイドバーのそれぞれが、サイドバーの幅だけ右に移動されます。

繰り返しになりますが、これはiOS7およびtranslate3dをサポートする他のすべてのブラウザーで完全に機能し、横向きの場合でもiOS8で正しく機能します。ただし、縦向きのiOS8では、ユーザーが下にスクロールした距離に基づいて、固定ヘッダーが画面からスライドします。

さらに、Safariインスペクターを使用すると、画面上のメニュー項目が予想される位置からオフセットされていることがわかります。つまりインスペクタで要素を選択すると、レンダリングされた実際の場所からオフセットされた画面上の領域が強調表示されます。

他の誰かがこれに遭遇しましたか？誰かが修正を知っていますか？

編集：インスペクターは、実際には画面から押し出されているにもかかわらず、固定位置ヘッダーが正確にあるべき場所にあると考えています。

iosscrollpositionios8fixed
9
Mike Snare

パーティーに少し遅れましたが、追加します

html, body {
    overflow-x: hidden;
    overflow-y: scroll;
}

IOS 8でオフセットされている固定要素（例：left：20px）のオフセットスクロールを修正します。

4
MaximeDesRoches

複数の固定位置要素とCSSアニメーションのオフキャンバスナビゲーションを使用したiOSでも同様の問題が発生しました。長いページでは、上向きの「ドリフト」は、最終的にナビゲーショントリガーを非表示にするポイントまで増加し、メニューを閉じることができなくなったため、ブロッカーでした。私は広範囲にわたって修正を見つけようとし、回避策を決定しました。アニメーション化する前に、上にスクロールして戻ります。 （#ocnTriggerは私のオフキャンバスメニュートリガーです。）

$('#ocnTrigger').click(function(){
    $('body').animate({
      scrollTop: 0
    }, 0);
});
1
pixelslave

私は似たようなことをしようとしていました（ ここ と ここ を参照）そしてAppleが テクニカルノート を公開し、固定配置を避けることを推奨していることがわかりました。iOS7で正常に機能したことを誓います。 、しかし今ではiOS8では「固執」しなくなりました。

この問題は、このメタタグの設定に密接に関連しているようです。

    <meta name="viewport" content="width=device-width">

参照： css位置を使用せずにdivを下に修正

0
iX3