web-dev-qa-db-ja.com

位置固定chrome mobileスクロールで要素が上下に移動する原因となります

Chrome mobile。のバグのように見えるこの奇妙な問題に直面しています。

Position：fixedのdivがあります。画面の右上隅に配置されます。デスクトップでは正常に機能します（所定の位置にとどまります）。モバイルでは、上下にスクロールするとdivが移動します。私はそれをより良く説明するためにビデオを作りました：

https://www.youtube.com/watch?v=gCgN6ULkcMg

scroll up

上にスクロールすると正常に動作します

scroll down

下にスクロールすると、position：fixedのdivの一部がビューポートの外に消えます

フィドルで問題を切り分けようとしましたが、再現できませんでした。そのため、Webサイト全体をフィドルでカプセル化し、問題は発生しなくなりました。理由はまだわかりませんでした。

フィドルで隔離されたWebサイト：削除*

ライブWebサイト：削除されました*

さらに、ライブWebサイトで、さまざまなデバイスでいくつかのテストを実行しました。

  • Chromeモバイル：バグ
  • Chromeデスクトップ：正常に動作します
  • Firefoxモバイル：正常に動作します
  • Safariモバイル：正常に動作します

誰かが私にChromeモバイルにこの問題があるのに、他の人にはないのはなぜですか？

私の位置：固定divは次のようになります：

div {
  position:fixed;
  top:10px;
  left:0;
  width:100%;
  text-align:right;
}

*クライアントのウェブサイトであるため、リンクを削除しました。解決策は以下の答えにあります。

htmlgoogle-chromemobilescrollcss-position
23
Lucas Bustamante

わかった。

何らかの理由で見捨てられた理由で、私の最愛のGoogle Chromeモバイルでは、ビューポートメタでminimum-scale = 1が必要です。

<meta name="viewport" content="minimum-scale=1">

今は動作します。

65
Lucas Bustamante

問題はmeta tagあなたはそこに置かなければなりません

<meta name="viewport" content="height=device-height, 
                      width=device-width, initial-scale=1.0, 
                      minimum-scale=1.0, maximum-scale=1.0, 
                      user-scalable=no, target-densitydpi=device-dpi">

これは、Chromeブラウザがheightのviewportを変更するためです。

10
vAhy_The

要素を開始してページの上部にとどめる場合は、使用してみてください

    #header {
          position: sticky;
          top: 0;
    }

少なくとも以前のバージョンのchromeデスクトップでは、修正が適切に動作していなかったため、相対位置要素は修正されたようにスティッキー位置要素を無視しないことに注意してください。

これが役立つかどうかはわかりませんが、この質問に到達したときに探していた答えです。

2
Travis Fleenor

ビューポートにぶら下がっているものがあるかどうかを確認することをお勧めします。ビューポートメタタグの調整は必要ない場合があります。

そのスティッキーなものがまだぐらついている場合、またはブラウザに息をする時間をもう少し与えるために、追加することを検討してください

transform: translate3d(0, 0, 0);

これは私の友人：Dにも役立ちます。z-indexを使用するときも、z-indexが非粘着性で適用されていないと仮定して、常に適用されるようにしてください。

0
rémy