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:

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). 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?

EDIT: Sample images showing the strange problems:

Ismael Miguel

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

What's Wrong

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.

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.

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. With this, the cross vanishes. Here is the resulting JSFiddle that applies this fix on the previous example.

TL;DR

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.

来源：https://stackoverflow.com/questions/27651878/chrome-and-media-queries-bug

标签

css

less

media-queries