Firefox & media query breakpoints WTF?! I must have missed the BATSHIT INSANE memo… but I’ve only just discovered that, when using media queries, Firefox includes the vertical scroll bar as part of the viewport width… so media query breakpoints activate at around 15px later than ‘visually’ expected (dependent on OS scrollbar width)… Now, before I hurl abuse solely at Firefox, it is only fair to point out that including the scrollbar is actually as specified by W3C… So, my guess is that Safari/Chrome opted to ignore this specification possibly on the grounds that it MAKES NO SENSE at all. As for W3C and Firefox - what the actual fuck!? I can’t put content behind the scrollbar so it isn’t exactly viewport, is it!? And a scrollbar can be variable widths on different devices, so it’s not even remotely consistent either! *throws things* Right, I’m off to search the W3C CSS Specs/email lists to see if this lunacy is moving in the direction of being sorted… or to vent my aggression on Max Payne 3… Thank you @Keithamus and @StuRobson for listening to my friday night grumble on Twitter :) UPDATE So I’ve been thinking of ways round this issue, and two have come to mind: Use a ‘buffer’ in your breakpoint - that is to say, have your breakpoint activate slightly earlier than when the content width/s requires it to.A faux gutter, of sorts. Extend respond.js to cater for Firefox (or Safari/Chrome, depending on which viewport will become the official standard)… but this feels diiiirty. Use a fluid grid - as pointed out by @RyanRoberts (via @cole007) - then the 15px wouldn’t really be an issue. Thanks for pointing that out! :) The issue continues further if you are using any JavaScript breakpoints to serve up ‘adaptive’ content - Firefox will return a different viewport width in JS than that recognised by the media queries.
View Separately

Firefox & media query breakpoints WTF?!

I must have missed the BATSHIT INSANE memo… but I’ve only just discovered that, when using media queries, Firefox includes the vertical scroll bar as part of the viewport width… so media query breakpoints activate at around 15px later than ‘visually’ expected (dependent on OS scrollbar width)…

Now, before I hurl abuse solely at Firefox, it is only fair to point out that including the scrollbar is actually as specified by W3C…

So, my guess is that Safari/Chrome opted to ignore this specification possibly on the grounds that it MAKES NO SENSE at all.

As for W3C and Firefox - what the actual fuck!? I can’t put content behind the scrollbar so it isn’t exactly viewport, is it!? And a scrollbar can be variable widths on different devices, so it’s not even remotely consistent either!

*throws things*

Right, I’m off to search the W3C CSS Specs/email lists to see if this lunacy is moving in the direction of being sorted… or to vent my aggression on Max Payne 3…

Thank you @Keithamus and @StuRobson for listening to my friday night grumble on Twitter :)

UPDATE

So I’ve been thinking of ways round this issue, and two have come to mind:

  1. Use a ‘buffer’ in your breakpoint - that is to say, have your breakpoint activate slightly earlier than when the content width/s requires it to.A faux gutter, of sorts.
  2. Extend respond.js to cater for Firefox (or Safari/Chrome, depending on which viewport will become the official standard)… but this feels diiiirty.
  3. Use a fluid grid - as pointed out by @RyanRoberts (via @cole007) - then the 15px wouldn’t really be an issue. Thanks for pointing that out! :)

The issue continues further if you are using any JavaScript breakpoints to serve up ‘adaptive’ content - Firefox will return a different viewport width in JS than that recognised by the media queries.

2 Notes/ Hide

  1. keirmoff posted this

Recent comments

Blog comments powered by Disqus