Safari: Media query not firing at the expected width

user_925214 0
Viewed 5971

I have written a CSS media query like this - 

@media screen and (max-width: 59.9375em) {
  .left {
   display: none;
  }
}

This works fine across all the browsers except Safari 10.0.4 and below. Safari seems to be handling the media queries differently.

Other browsers seem to be taking the window.innerWidth as viewport width for triggering media queries, but safari seems to be taking document.documentElement.clientWidth as viewport width and triggers the media queries accordingly.

I can see a difference of 15px between the actual and expected breakpoint. I am looking for a cross-browser way for dealing with this issue. Thoughts are welcome, thanks in advance.

media-queries safari breakpoints css
5 Answers

You should read these two articles:

Then you'll understand why you have the problem you've asked about.

TLDR: em values are based on root font-size values, but in the case of Safari vs other browsers, em is either relative to the initial value or the root value (browsers pick one or the other for media queries, but not both, which can cause discrepancies across browsers)

user_4547800
Related