Chrome and Media Queries Bug

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.

Bug with browsers' interpretation of @media queries

It's difficult to give a specific answer without seeing what you are seeing, but it's possible that the browsers are handling the transition from one media query to the next in different ways discussed below.

Most Likely Cause: Windows Display Settings

I assume you are using Windows when you mention Edge, I suspect this might be because you have changed the scale of your display in Windows - Display Settings. If this is set to 125% for example, this can have an affect on all aspects of your display.

So really this isn't a bug with the media queries, so much as a discrepancy caused by the browsers not effectively handling the scaling by Windows Display settings.

UPDATE - Now that you have confirmed that you can stop on a particular point where this happens, then I'm pretty confident this is the cause. In my testing yesterday when looking into this, I was able to reproduce that behaviour when the display was scaled.

Using the following test case with original styling of an empty block with a red border, and different CSS applied at (max-width: 1119px) and (min-width: 1120px), the issue happens only when the display is scaled.

body{ margin:50px 0 0 0;}

.test {
  border: 10px solid #f00;
  height: 10px;
}

@media (min-width: 1120px) {
  .test {
    background: #ff0;
    height: 500px
  }
}

@media (min-width: 720px) and (max-width: 1119px) {
  .test {
    margin-left: 300px;
    background: #0FF;
    height: 200px
  }
}

@media (min-width: 460px) and (max-width: 719px) {
  .test {
    margin-left: 300px;
    background: #00f;
    height: 200px
  }
}

@media (max-width: 460px) {
  .test {
    background: #ff0;
    height: 100px
  }
}

<div class="test"></div>

Chrome Media Query Glitch: Media Query firing too early

Perhaps your meta tag is missing the content attribute with values: width=device-width, initial-scale=1?

<meta name="viewport" content="width=device-width, initial-scale=1">

as far as i can recall chrome requires these attributes and values to work proper with custom media queries

EDIT

After a discussing with @user2381937 in chat and reading some external resources:
https://inspirnathan.com/posts/2-media-query-inspector-chrome/

https://www.sitepoint.com/rwd-scrollbars-is-chrome-better/

we found that chrome and firefox differ in how they consider the width of the scrollbar when rendering the page. And that the way forward is either to swap query breakpoints to account for the offset or to make browser specific queries.

Responsive media query not working in Google Chrome

add this line in <head>

<meta name="viewport" content="width=device-width,initial-scale=1">

Chrome Device Mode Emulation Media Queries Not Working

I fixed this problem by adding a meta tag to my page:

 <meta name="viewport" content="width=device-width">

UPDATE (December 2019):

It looks like you may also need to set the initial scale and minimum scale, like so:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />

css media query not working properly on google chrome

I have found the mistake I'am making is that I have zoomed out my chrome browser to 67% that was cause the problem of width scaling.
Now everything is working fine when I backed to 100% zoom.

CSS3 - Media Queries Not Working (Google Chrome)

The @media query is valid and works perfectly.

If it doesn't work in your application, it means you have a stronger CSS selector overriding the selector used in the @media query. Like, for example:

body {
  background-color: white !important;
}

@media screen and (max-width: 400px) {
  body { 
    background-color: red; 
  }
}

@media query still works, but !important rule has higher CSS specificity and therefore applies to the element.

Very important note: @media queries do not increase specificity. They simply tell the browser to apply the rule selectively based on the given condition. But, when the condition is true, the code inside it is treated as it if wouldn't have been wrapped in the condition. So it doesn't have increased specificity.

Note Another common reason for @media queries "not applying" is when they're tested in browsers with a zoom level set at another value than 100%.

To reset the zoom level of your browser use Ctrl + 0

To see where the currently applying value for any CSS property on any element in your page comes from (what selector, what stylesheet, what line number), all you need to do is to use a browser developer console (typically opened by selecting "Inspect Element" (or similar) from the context menu, if used on the element).

Chrome and Media Queries Bug