3

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.

Community
  • 1
  • 1
beefchimi
  • 1,308
  • 2
  • 17
  • 34

1 Answers1

2

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

Alex Johnson
  • 44
  • 2
  • 2
    I wanted to mention that it does make a difference because if you are trying to hide an element between the range 400px - 768px it will actually not work until you hit the range 385px - 753px. And if you based any width percentages on a max width of 768 then that fails for 15px as well. So I would say it makes a difference. – pjdicke Nov 06 '13 at 20:35