Chrome和媒体查询错误

Question

我试图创建一个基本上是几个垂直定位的幻灯片的网站。我一直希望能够做出反应灵敏的设计，以便我的滑动＆＃34;适当调整大屏幕尺寸或适当填充奇怪的尺寸。这是我的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;
}

当我使用带有5个div（家庭，关于，经验，爱好，联系）的简单html文件运行它时，似乎在大多数情况下都有效。但是，在chrome上，我调整大小时似乎会出现错误。有时，我的网页会消失，取而代之的是一些黑色/灰色的十字架。如果我非常快速地调整大小（快速调整窗口大小），则会出现一个棋盘，甚至是一个完全在另一个选项卡上的其他网页。我尝试使用媒体查询测试调整另一个网页的大小，但这个问题没有发生。我使用媒体查询的方式是否存在固有的错误？

编辑：显示奇怪问题的示例图片：

Answer 1

经过漫长而艰苦的聊天会议，我们已经找到了修复bug的方法。以下是摘要：

错误

出于某种原因，Chrome在渲染大型div时出现问题。到目前为止，我不确定错误的确切位置，但是一个简单的例子有5个100％宽度/高度div会导致这个奇怪的问题。这是一个JSFiddle这个例子。该错误仅在框架外显示，因此您必须将框架源复制到其自己的网页中。

从我可以收集的信息来看，Windows上的Chrome渲染引擎引发了一些奇怪的事情，这会导致奇怪的黑色＆amp;调整窗口大小时会出现灰色十字架。

修复

修复不是很优雅，但它有效。只需在每个div上应用transform:rotate(0)即可强制加速。有了这个，十字架就消失了。以下是在前一个示例中应用此修复的结果JSFiddle。

---

<强> TL; DR

当Chrome无法使用图形卡渲染页面时，会发生奇怪的事情。对损坏的项目使用transform:rotate(0)以强制显示图形卡。