Search code examples
cssfirefoxwidthscrollbarmedia-queries

CSS Media Queries and Firefox's Scrollbar Width

Possible Duplicate:
issue with CSS media queries(scrollbar)

So, Firefox includes the scrollbar width in its window width calculation, where was Webkit does not. This results in an inconsistency between browsers.

Now, I know that technically Firefox is following the spec by calculating the scrollbar as part of the window width, but this seems really counter-intuitive to me. After all, mobile devices don't have scrollbars, and scrollbar width varies from browser to browser / OS to OS.

Is there anything I can do to prevent Firefox from including the scrollbar width? Perhaps a piece of jQuery that will allow my media queries to fire correctly across browsers?

Thanks.

Solution

  • 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