Chrome和媒体查询错误 [英] Chrome and Media Queries Bug

问题描述

我想创建一个基本上是几个垂直放置的幻灯片的网站。我一直希望做出一个响应式设计，所以我的幻灯片适当调整大小较大的屏幕尺寸或适当填充奇怪的尺寸。这是我的LESS文件设置适当的维度：

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:

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;
}

当我运行一个简单的html文件与5 divs（家，关于，经验，爱好，联系）。但是，在chrome，一个bug似乎发生时，我调整大小。有时，我的网页简单地消失，用一些黑色/灰色交叉代替。如果我调整非常快（快速调整窗口大小），一个棋盘出现，甚至一些其他网页完全在不同的选项卡。我试着测试调整另一个网页也使用媒体查询，这个问题没有发生。

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). However, on chrome, a bug seems to occur while I resize. 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?

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

Sample images showing the strange problems:

推荐答案

经过漫长而艰苦的聊天会话，制定了一个bug的修复。以下是摘要：

After a long and arduous chat session, we have worked out a fix for the bug. Here is the summary:

错误

由于某种原因，Chrome一个问题渲染大div。到目前为止，我不知道错误在哪里，但一个简单的例子与5 100％宽度/高度divs导致这个奇怪的问题。以下是此示例的 JSFiddle 。

For some reason, Chrome has a problem rendering large divs. 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. Here is a JSFiddle with this example. The bug only manifests outside of a frame, so you must copy the frame source into its own webpage.

从我可以收集的东西，一些奇怪的事情发生在引擎盖下， Chrome在Windows上的渲染引擎，这会导致奇怪的黑&调整窗口大小时出现灰色十字。

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.

修复

不是很优雅，但它的工作。只需在每个div上应用 transform：rotate（0）即可强制gpu加速。这样，十字架消失了。以下是导致的 JSFiddle 在上一个示例中应用此修复程序。

The fix isn't very elegant, but it works. Simply apply a transform:rotate(0) on each of the divs to force gpu acceleration. With this, the cross vanishes. Here is the resulting JSFiddle that applies this fix on the previous example.

TL; DR

页面与显卡，奇怪的事情发生。对破损的项目使用 transform：rotate（0）强制显卡渲染。

When Chrome isn't rendering the pages with the graphics card, strange things occur. Use transform:rotate(0) on broken items to force graphic card rendering.

这篇关于Chrome和媒体查询错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！