アイフォーン、マイナスマージンが原因でスライドアウトメニューで位置ドリフトが発生する

Question

これはクロムとサファリのiphoneで発生しています。他のシステムでは複製できませんが、iPhoneで修正が見つからないようです。

私は小さな画面用のスライドアウトハンバーガーメニューを作成しました。使用位置：固定。それは、iPhoneを除いて、かなりうまくいく。それはクロムかサファリかどうかは関係ありません。ページを下にスクロールすると、画面の上端からメニューがゆっくりとスクロールしてスクロールします。私はそれを隠して表示するために、負のマージンを削除して再描画し、コンテンツウィンドウに負のマージンを追加してコンテンツを横にスライドさせるためにクエリを使用しています。

（#wrapperを使用して）コンテンツウィンドウにマイナスのマージンを使用しないと、固定ウィンドウはその位置に固定され、上部に固定されます。しかし、＃wrapperの内容は、メニューと共に横にスライドして表示され続けるのではなく、画面の残りの幅に押しつぶされます。

固定メニューのすべてのインスタンスに影響を与えているようですが、スティッキーメニューも画面からスクロールします。あなたがスクロールすると0点が変化しているようです。

私は困惑しています。私はこれがバグか、私がここで何かを逃しているかどうかわからない。私はそれを修正するために非常に多くの方法を試してきたし、毎回空の手を出す。合併症、私は単純なHTMLとCSSを使用して複製することはできませんが、私は何か間違って見つけることができません。私は、iPhoneのリンクを使ってSafariで開発ツールを試しました。それが負のマージン問題を発見したのですが、解決できないようです。

これはトップを設定していないのでjqueryではありませんが、機能をオフにして#wrapperの負のマージンからコードを開始して、メニューが画面からスクロールします。また、小さな負のマージンでも問題は発生しません。それは大きな負のマージンでなければならない。

div＃wrapper、div＃MobileNav、div＃NavBar、bodyと思われるコンテナ。 div＃MobileNavとdiv＃NavBarは、ラッパーの外側とbodyタグ内の固定位置です。

URLはここにあります：http://fusedjaw.terminus13.com/とあなたは480pxより小さい任意のideviceで複製することができます。画面キャプチャもあります： https://imgur.com/gallery/eP7LZ

矢印は、固定メニューがどのようにシフトするかを示しています。 jqueryは、すべてをスローするように見える負のマージンを追加するラッパーに.openクラスを追加しています。

第2は、真の0の位置を尊重するように見える上までスクロールするときです。

Answer 1

leftなどを使用して、固定位置付け、スクロール、オフセットを使用したiOSバグのようです。

が、私は関連を発見した（？変換を使用している場合、私は疑問に思う/移動Xは良いだろう）だからあなたのサイト上で私のために働いた修正で、昨年からスレッド：固定デバッガでこれを追加すること、具体的に https://stackoverflow.com/a/31879732/4573410

iOS Safariでの漂流問題：