[英]Chrome and Media Queries Bug
I'm trying to make a website that is essentially a few vertically positioned slides. 我正在尝试创建一个基本上是几个垂直定位幻灯片的网站。 I had been hoping to make a responsive design so my "slides" are appropriately resized on larger screen sizes or are padded appropriately in strange dimensions.
我一直希望能够做出响应式设计,这样我的“幻灯片”就会在更大的屏幕尺寸上适当调整大小,或者在奇怪的尺寸上进行适当的填充。 Here is my LESS file setting the appropriate dimensions:
这是我的LESS文件设置适当的尺寸:
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
//============================================================
// Dimensions for each section for standard desktop screen
//============================================================
#home {
@media screen and (min-aspect-ratio: 16/10) {
height: 92%;
width: 160vh;
padding: 0 calc(50% - 80vh);
}
@media screen and (max-aspect-ratio: 16/10) {
width: 100%;
height: 57.5vw;
}
}
#about {
@media screen and (min-aspect-ratio: 16/10) {
height: 108%;
width: 160vh;
padding: 0 calc(50% - 80vh)
}
@media screen and (max-aspect-ratio: 16/10) {
width: 100%;
height: 67.5vw;
}
}
#experience, #hobbies, #contact {
@media screen and (min-aspect-ratio: 16/10) {
height: 100%;
width: 160vh;
padding: 0 calc(50% - 80vh);
}
@media screen and (max-aspect-ratio: 16/10) {
width: 100%;
height: 62.5vw;
}
}
//============================================================
// colors
//============================================================
#home {
background-color: black;
}
#about {
background-color: #488BFF;
}
#experience {
background-color: #B3B3B3;
}
#hobbies {
background-color: #FF7F35;
}
#contact {
background-color: #803A7D;
}
It seems to work for the most part when I run it with a simple html file with the 5 divs (home, about, experience, hobbies, contact). 当我用一个带有5个div(家庭,关于,经验,爱好,联系)的简单html文件来运行它时,它似乎在很大程度上起作用。 However, on chrome, a bug seems to occur while I resize.
但是,在chrome上,我调整大小时似乎会出现错误。 Sometimes, my webpage simply disappears, replaced with some black/gray cross.
有时,我的网页会消失,取而代之的是一些黑色/灰色的十字架。 If I resize very quickly (rapidly resizing the window), a checkerboard appears or even some other webpage completely on a different tab.
如果我非常快速地调整大小(快速调整窗口大小),则会出现一个棋盘,甚至是一个完全在另一个选项卡上的其他网页。 I tried testing resizing another webpage also using media queries, and this problem did not happen.
我尝试使用媒体查询测试调整另一个网页的大小,但这个问题没有发生。 Is there something inherently wrong with how I'm using media queries?
我使用媒体查询的方式有什么本质上的错误吗?
EDIT: Sample images showing the strange problems: 编辑:显示奇怪问题的示例图像:
After a long and arduous chat session, we have worked out a fix for the bug. 经过漫长而艰苦的聊天会议,我们已经找到了修复bug的方法。 Here is the summary:
以下是摘要:
What's Wrong 怎么了
For some reason, Chrome has a problem rendering large divs. 出于某种原因,Chrome在渲染大型div时出现问题。 As of now, I'm not sure where the bug lies exactly, but a simple example with 5 100% width/height divs causes this strange problem.
截至目前,我不确定错误的确切位置,但是一个简单的例子,5个100%宽度/高度div会导致这个奇怪的问题。 Here is a JSFiddle with this example.
这是一个带有这个例子的JSFiddle 。 The bug only manifests outside of a frame, so you must copy the frame source into its own webpage.
该错误仅在框架外显示,因此您必须将框架源复制到其自己的网页中。
From what I can gather, something strange is happening under the hood in Chrome's rendering engine on Windows, which causes the strange black & gray crosses to appear when resizing a window. 从我可以收集的内容来看,Chrome在Windows上的渲染引擎的引擎盖下发生了一些奇怪的事情,这会导致在调整窗口大小时出现奇怪的黑色和灰色十字。
The Fix 修复
The fix isn't very elegant, but it works. 修复不是很优雅,但它的工作原理。 Simply apply a
transform:rotate(0)
on each of the divs to force gpu acceleration. 只需在每个div上应用
transform:rotate(0)
以强制gpu加速。 With this, the cross vanishes. 有了这个,十字架就消失了。 Here is the resulting JSFiddle that applies this fix on the previous example.
以下是在前一个示例中应用此修复的结果JSFiddle 。
TL;DR TL; DR
When Chrome isn't rendering the pages with the graphics card, strange things occur. 当Chrome没有使用图形卡渲染页面时,会发生奇怪的事情。 Use
transform:rotate(0)
on broken items to force graphic card rendering. 对已损坏的项目使用
transform:rotate(0)
以强制执行图形卡呈现。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.