Chrome and Media Queries Bug

Question

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 resize

Answer 1

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.