Chrome Media Query Glitch: Media Query firing too early-CodePudding

We have a major problem where for some reason Chrome is firing responsive Media Queries too early. So instead of firing at 1000px, it fires around 984px. Max width/min width containing any value makes no difference. It's as though it's off by about 14 to 24px depending on factors only it understands.

There are also no conflicting queries that could be causing this (we tried it on 'fresh pages' in the project) and even nuked the main stylesheet, but the problem still persists. Also we're not doing anything funky by manipulating window/document or body widths, margins, scale/zoom with Javascript or CSS.

We're completely baffled by this one and have tried for a few days to fix check Stackoverflow etc. but to no avail so far.

Code below:

div {
     background: orange;
}
@media only screen and (min-width: 1000px) {
    div {
        width: 100px;
        height: 100px;
        background: green;
    }
}

Some things in place and background:

This worked previously, however all of a sudden we're encountering this bug...
It is happening in Chrome and Brave, but works fine in Edge and Firefox. We've tried several other machines and different versions of Chrome, but the issue persists. We can only guess that maybe something got introduced into the project that is causing this, but we are stumped as to what.
Browser zoom is correct @ 100%
Meta tag viewport is in place correctly
Tried the 'decimal fix' like 1000.0px - but it doesn't work...
Dev tool says that the window size is 1000px, but Chrome only fires the code at 983px or thereabouts
Code works in a test file (with the same index/template that is in the project) and Chrome handles the media query 100% correctly
React Solution with Bootstrap 4.5.3
Worked before

Any ideas? Is there a way that we can 'reset' Chrome's media queries or what are we missing? Answers in other similar questions in StackOverflow do not appear to work which makes us think that this is maybe a separate issue or new bug?

Any help / insight is greatly appreciated! :)

CodePudding user response：

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.