Bug in Chrome and Media Queries
I am trying to create a website that is essentially multiple vertical slides. I was hoping to make a responsive design so that my "slides" are appropriately resized to larger screen sizes or padded appropriately at odd sizes. Here is my LESS file showing the respective 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 looks like it works for the most part when I run it with a simple html file with 5 divs (home, about, experience, hobbies, contact). However, on chrome, the error occurs when I resize. Sometimes my webpage just disappears, replaced with a black / gray cross. If I resize very quickly (quickly resizing the window), a check-bar or even some other web page appears on another tab. I tried testing resizing another web page using media queries as well and this issue was not there. Is there something inherently wrong with the way I use media queries?
EDIT: Sample images showing strange problems:
source to share
After a long and laborious chat session, we have developed a bug fix. Here's a summary:
What's wrong.
Chrome has problems with large divs for some reason. At the moment I'm not sure where the error is exactly, but a simple example with 5 100% width / height divs causes this weird problem. Below is a JSFiddle example . The error only shows outside the frame, so you have to copy the frame source to your own webpage.
From what I can gather, something strange is happening under the hood in the Chrome rendering engine on Windows, resulting in weird black and gray crosses appearing when the window is resized.
Correction
The fix is not very elegant, but it works. Just overlay transform:rotate(0)
on each of the divs to force gpu to speed up. In this case, the cross disappears. Here is the output from a JSFiddle that applies this fix in the previous example.
TL; DR
Strange things happen when Chrome does not render the graphics card pages. Use transform:rotate(0)
on broken elements to force rendering of the graphics card.
source to share