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浏览器中滚动条的媒体查询布局问题

回答

相关问题