0

Chromeのメディアクエリでこの奇妙な問題が発生していますが、これはかなりわかりにくいですが、本当に私を悩ませているので、ここで解決策を見つけるか、少なくとも私が怒っていないことを確認したいと思っています...

基本的に、コンテンツが画面からスクロールされている状態 (y 軸のスクロール バーがある) から、コンテンツが画面に収まる状態にページを移動するメディア クエリが開始されるようです。 (したがって、y 軸のスクロール バーは表示されません) スクロール バーが存在しない場合でも存在するかのようにページ レイアウトがレンダリングされる小さな期間があるようです (そのため、画面全体を埋めようとする何かが表示されます)。この期間はありません）

問題を紹介するための簡単なページを設定しました。2 つのフローティング div が含まれており、メディア クエリが幅 500 ピクセル未満で開始されると、フローティングではなくなり、幅が大きくなります。その時点で、ヘッダー バーも青から赤に変わります (わかりやすくするため)。

http://appasylum.net/test/mediaQueryChromeScrollBarIssue/

  <!DOCTYPE html>
  <html>
  <head>

      <title>Media Query Chrome Scrollbar issue</title> 
      <style type="text/css">

      html,
      body 
      {
         margin:0;
         padding:0;
      }

      .header
      {
        background-color: blue;
        padding: 10px;
        color: white;
        font-family: Helvetica, Arial, sans-serif;
      }

      .content
      {                
        background-color: #f5f5f5;
        border: 1px solid #e3e3e3;              
        float: left;
        width: 40%; 
        margin: 20px; 
      }

      @media (max-width: 500px) {

        .header
        {
          background-color: red;
        }

          .content
          {
            float:none;
            width: 90%;
          }
      }
      </style>

  </head>

  <body>

  <div class="header">
    Header
  </div>

  <div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec purus ut quam vestibulum porta sed ultrices velit. Suspendisse dapibus justo id ligula iaculis cursus. Fusce non diam ut ante porta lacinia id vel nisl. Mauris laoreet orci vel nulla imperdiet ac rhoncus diam accumsan. Quisque sed mauris mi, sollicitudin commodo ligula. Etiam arcu arcu, vehicula ut porttitor id, viverra non augue. Mauris laoreet fringilla tempus. Praesent elit elit, molestie eget bibendum vitae, fringilla nec turpis. Suspendisse eget ipsum sed sem egestas ultricies. Cras eleifend imperdiet magna nec elementum. Etiam arcu arcu, vehicula ut porttitor id, viverra non augue. Mauris laoreet fringilla tempus. Praesent elit elit, molestie eget bibendum vitae, fringilla nec turpis. Suspendisse eget ipsum sed sem egestas ultricies. Cras eleifend imperdiet magna nec elementum.Etiam arcu arcu, vehicula ut porttitor id, viverra non augue. Mauris laoreet fringilla tempus. Praesent elit elit, molestie eget bibendum vitae, fringilla nec turpis. Suspendisse eget ipsum sed sem egestas ultricies. Cras eleifend imperdiet magna nec elementum.
  </div>

  <div class="content"> Aliquam in mauris quis arcu aliquam aliquam eu ut mauris. Quisque ut tortor eu massa scelerisque vehicula. Morbi velit diam, egestas at placerat vel, tincidunt a nulla. Vivamus arcu augue, vulputate at elementum sit amet, adipiscing quis odio. Etiam arcu arcu, vehicula ut porttitor id, viverra non augue. Mauris laoreet fringilla tempus. Praesent elit elit, molestie eget bibendum vitae, fringilla nec turpis. Suspendisse eget ipsum sed sem egestas ultricies. Cras eleifend imperdiet magna nec elementum
  </div>

  </body>
  </html>

上記のリンクを複製するには、幅が 500 ピクセルを超えるウィンドウ (青いヘッダー) で、コンテンツがページからはみ出す程度の高さで開きます。次に、ウィンドウが赤くなるまでウィンドウの幅をゆっくりと減らします (つまり、幅 500 ピクセル）。ウィンドウの高さによって、フローティングされていない div がスクロール バーを必要としなくなる (またはその逆) と仮定すると、赤と青の見出しの間の遷移の時点 (つまり、メディア クエリがアクティブになる) で、非常に短い間気付くはずです。赤いヘッダーがビューポート幅全体を埋めていない期間。

4

1 に答える 1

0

ここでChromeは無限ループに入っていると思います。500pxを少し下回ると、彼は垂直スクロールバーを削除しますが、スクロールバーを削除した直後にウィンドウの幅が500pxを超え、その幅にCSSを適用すると、再び垂直スクロールバーが必要になり、開始した場所と同じ場所に戻ります。 ...とても無限ループ。基本的に、Chromeは、垂直スクロールバーが使用していたスペースを残すことにより、無限ループから自身を保護します。

私が見る限り、スクロールバーを完全に削除するか、overflow：hiddenを本体に表示するか（ただし、99％のWebサイトではあまり役に立たないと思います）、overflow-y：scrollを使用して常に本体に表示したままにすることができます。

編集：おそらくbodyタグのスクロールバーを削除してみることができますが、overflow-y：scrollを使用してすべてのコンテンツを1つのdivにカプセル化します。divはbodyと同じくらい広いですが、このように機能しているようです。私のテストではグリッチはありません。これには、このdivを画面の100％の高さに設定する必要があります。

于 2013-01-21T22:47:57.487 に答える