Chrome瀏覽器中滾動條的媒體查詢佈局問題

Chrome中的媒體查詢出現了這個奇怪的問題，這個問題比較模糊，但確實讓我感到困擾，所以我希望能夠在這裏找到解決方案或至少確認我不會生氣...Chrome瀏覽器中滾動條的媒體查詢佈局問題

基本上，當媒體查詢踢的時候，會從內容滾動離開屏幕的狀態進入頁面（所以你有y軸滾動條）到內容現在適合屏幕的狀態（所以y軸滾動條不應該出現），似乎有一小段時間，頁面佈局被渲染，就好像滾動條在那裏，即使它是不是（所以試圖填滿整個屏幕的東西不會出現在這段時間內）

我已經設置了一個簡單的頁面來展示這個問題。它包含兩個浮動div，當一個媒體查詢在小於500px寬的範圍內被設置爲不再浮動並且具有更大的寬度時 - 此時標題欄也從藍色變爲紅色（爲了清楚起見）。

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像素寬（藍色報頭），並在高度僅只是讓內容滾動離頁面 - 然後慢慢降低寬度直到它變成紅色（即寬度小於500px）。假設窗口的高度導致未浮動的div不再需要滾動條（反之亦然） - 在紅色和藍色標題之間轉換時（即媒體查詢變爲活動狀態），您應該注意非常短紅色標題不填充整個視口寬度的期間。

來源

2013-01-21 Rusta

注意：這個怪癖/問題不再發生在最新版本的Chrome – Rusta

我認爲Chrome在這裏進入無限循環。在500px以下時，他會刪除垂直滾動條，但在刪除滾動條窗口寬度返回到500px以上後，他會將CSS應用於該寬度，而這又會需要垂直滾動條，而且我們再次位於我們開始的相同位置......無限循環。基本上，Chrome只是通過留下垂直滾動條所使用的空間來保護自己免受無限循環的影響。

就我所見，你可以完全移除滾動條，即溢出：隱藏在身上（但我猜這對99％的網站沒有太大的幫助），或者在任何時候都將它放在身體上， Y：滾動。

編輯：也許你可以嘗試刪除身體標籤上的滾動條，但用overflow-y：scroll將所有內容封裝在一個div中。儘管div與身體一樣寬，但它似乎以這種方式工作，在我的測試中沒有任何小故障。這將需要建立這個div是100％的屏幕高度，但可能是。

來源

2013-01-21 22:47:57

謝謝您確認我沒有生氣 – Rusta

Chrome瀏覽器中滾動條的媒體查詢佈局問題

回答

相關問題