Css Chrome和媒体查询错误

我正试图建立一个网站，基本上是一些垂直定位的幻灯片。我一直希望能做出一个反应灵敏的设计，这样我的“幻灯片”就可以在更大的屏幕上适当地调整大小，或者在奇怪的尺寸上适当地填充。以下是我的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（home、about、experience、cabiods、contact）的简单html文件运行它时，它似乎在很大程度上起作用。然而，在chrome上，当我调整大小时，似乎出现了一个bug。有时，我的网页会消失，被一些黑色/灰色的十字架取代。如果我快速调整大小（快速调整窗口大小），一个棋盘会出现，甚至一些其他网页会完全位于不同的选项卡上。我试着用媒体查询来测试另一个网页的大小，但这个问题没有发生。我使用媒体查询的方式是否存在固有的问题

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

---

经过一段漫长而艰苦的聊天之后，我们已经找到了一个漏洞的修复方案。总结如下：

怎么了

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

据我所知，在Chrome的Windows渲染引擎的引擎盖下发生了一些奇怪的事情，这导致在调整窗口大小时出现奇怪的黑色和灰色交叉

修复程序

修复不是很优雅，但它可以工作。只需在每个div上应用

变换：旋转（0）

，即可强制gpu加速。这样，十字架就消失了。下面是将此修复应用于上一个示例的结果

---

TL；DR

---

当Chrome不使用图形卡渲染页面时，会发生奇怪的事情。在损坏的项目上使用

transform:rotate（0）

强制图形卡渲染。

如果回流时间过长，棋盘格是正常的。这意味着它上面根本没有显示任何内容。一些图像编辑程序使用此选项显示透明度。这个问题过去经常发生在老式iPhone和iPod上。试着把你的单位改成em或百分比。当我说棋盘时，我说的是一个黑色的尖叫声，白色的方块穿过对角线。不像旧iPhone那样的全屏棋盘游戏。而且，它似乎在我的windows桌面上（但在我的Mac电脑上）生成了一个黑色和灰色的十字。只是一个巨大的黑灰色十字架。在原始帖子中添加了一些图片。你有nvidia卡吗？在使用chrome的windows 8上，nvidias存在一些视觉缺陷。您应该尝试更新驱动程序。我有一个chrome客户端，它将所有网页显示为粉红色，我在我的windows电脑上就是这样做的。然而，它只有一个旧的驱动程序（现在更新），所以我怀疑这是问题所在（这里的玩家，哈哈）。不过，这并不能解释mac的问题。这可能仅仅是一个chrome问题吗？它在firefox甚至IE中都能正常工作。你能试着组装一把小提琴来显示这个问题吗？我可以试试我的电脑，之后我会给出更好的理由。但我唯一能想到的是图形问题和视口单元的问题。当我回到我的计算机并信任你时，我将进行测试！谢谢当我完成开发时，如果问题仍然存在，我可能会忽略它并返回到这些解决方法中。@ImpGuard如果你真的能够忽略这一点，你的坚强意志应该得到一块饼干。我不能忽视这样一个错误。但作为临时修复，您确实可以设置

transform:rotateZ（0deg）到
，你不需要“忽略”它。哈哈，我没问题，因为从技术上讲，它不是我的bug，不会出现在其他浏览器上。是的，那会管用的@我希望您现在有一个很好的编码会话。请考虑现在使用百分比，或者你可以检查，但是如果你使用JavaScript代码，在这里使用一个。检查一下，你会发现iOS、IE9和Firefox mobile都存在一些问题。嗯，没有js，百分比是如何工作的？你不能保证高宽比，是吗？