CSS Media Queries and Firefox's Scrollbar Width

CSS Media Queries and Firefox's Scrollbar Width

If you are just using media queries, then the offset from the sidebar won't make any difference between browsers.

If you are trying to use jQuery with a media query however, you may run into some small problems as the widths returned in jQuery are consistent, and the offset will then show.

To fix this you simply need to calculate the offset of the sidebar in firefox browsers and subtract that from whatever point you wanted to syncronize at. i.e.

var scrollBarWidth = 0;
if ($.browser.mozilla)
  scrollBarWidth = window.innerWidth - jQuery("body").width();

Then later on when you specify the synchronization...

if ($(window).width() < mediaQueryWidth - scrollBarWidth) {
  //act to do along with the media query
}

Hope this was helpful

issue with CSS media queries(scrollbar)

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;
            }
        }

How to Force All Browsers to Measure Viewport Width Consistently for Media Queries

IE, Firefox and Opera follow the W3C spec of including the scrollbar width in the media query, where Webkit browsers do not.

You can't force the browsers to treat it the same at the moment, so the best option is to modify your layout so that it is not so tightly tied to the widths in your media queries (add extra margin). With such a layout, when it triggers a few pixels early or late, it won't make as much of a difference.

Media Queries firing at wrong width

A common reason this happens is if you have zoomed the browser window to a size other than 100%. In your browser, select the drop-down menu 'View' and make sure it is set to 100%. If you are zoomed in or out, it will trigger media-queries inappropriately.

And don't worry about feeling embarrassed. It has probably happened, or will happen to everyone.. but only once.

---

In order to avoid this issue all together, you should considering defining your media queries using a relative units (em or rem rather than px).

---

You can also enforce setting the browser zoom level to 100% on page load using javascript.

document.body.style.webkitTransform =  'scale(1)';
document.body.style.msTransform =   'scale(100)';
document.body.style.transform = 'scale(1)';
document.body.style.zoom = screen.logicalXDPI / screen.deviceXDPI;

---

Related Topics