issue with CSS media queries(scrollbar)

Question

I am having problem with css media query in Firefox. It works correct in Chrome like I made two DIVs and want a scrollbar. If I decrease the screen size of firefox upto 800px then both DIVs collapse and after some pixels media query works but that not happens in Chrome.

check this fiddle http://jsfiddle.net/RMvqC/2/

Answer 1

I SOLVED this issue by calling the "mqGenie" javascript in the head of my project.

Now the widths of my media queries work fine ( with the same value ) on Chrome, Safari, Firefox and IE with or without scroolbars.

This javascript Adjusts CSS media queries in browsers that include the scrollbar width in the viewport width so they fire at the intended size.

You can download it from this url:

http://stowball.github.io/mqGenie/

Answer 2

Firefox & Webkit based browsers render the scrollbar differently. In Firefox, MediaQuery considered width of scrollbar which is 15px with the screen width, but in Webkit based browsers it's not considered scrollbar with the screen width. So, that's why the floated DIVs are collapsed in Firefox.

I did some stuff with css may be that's help you. (check this fiddle)

        html {             /* force scrollbars */             height: 101%;         }         body {             margin: 0;              padding:0;              white-space:nowrap;          }           #box1,         #box2 {             display:inline-block;             width: 400px;             height: 200px;               vertical-align:top;             white-space:normal;         }         #box1 {             background: #ce0000;              margin-right:-5px;         }         #box2 {             background: #8e0000;         }          @media screen and (max-width: 799px) {              body {                  white-space:normal;              }             #box1,             #box2 {                 width: 300px;             }         }