Scott Schweigert Scott Schweigert - 1 year ago 149
CSS Question

OSX Safari applying media query 15 pixels early

I have 2 media query sizes -

only screen and (min-width: 980px)and (max-width: 1499px)";

only screen and (min-width: 768px)and (max-width: 979px)";

Safari is applying the second media query while the browser width is still in range of the first one - when the window.innerwidth is between 980 - 995.

I've never seen this before - any ideas?

update -

so I figured out the issue - the new OSX safari's media queries use document.documentElement.clientWidth as a measurement - while all other browsers (and what i've coded for to have javascript kick in at the same time) uses window.innerWidth

the result is safari getting jumbled by have the css load for the size where it shouldn't for 15 px -

the only fix I can find is writing some safari specific js - which is not ideal, but the only thing i can think of.

Answer Source

window.innerWidth is the width of the viewport, which includes vertical scrollbars.

My guess is the media queries are triggering based on the width of the viewport minus the scrollbar, which would account for the 18px discrepancy. This explains it better than I can: