Browser differences with media query trigger parameters
I noticed that Media Consumer breakpoints run differently in Chrome versus all other browsers (IE9, Chrome, Opera).
Refer to the following screenshots to help explain (please ignore the replacement images). First, where is the breakpoint in chrome:
Now let's see below where the media query is triggered for all other browsers. We'll use Firefox as an example, but it's the same for IE9 and Opera.
Differences:
-
In chrome, the trigger point for the media query is 1190 pixels. In all other browsers, the launch point is 1173 pixels. The difference is 17px.
-
17px is also the difference between the actual width of the browser itself. What I mean? I took a screenshot of before and after running media queries in both Chrome and Firefox. In photoshop, I kept the width of the jpg image consistent across both browsers. For some reason, the media query runs 17px earlier in every browser except Chrome.
Actual media query CSS query code:
@media (min-width: 1190px) and (max-width: 1254px) {
.visible-large {
display: inherit !important;
}
}
@media (max-width: 1189px) {
.visible-large {
display: none !important;
}
}
My question is: Is there a way to make the media query run at the same point across all browsers?
source to share
The real difference is how chrome-based browsers treat window / document width. In chrome-based browsers the scrollbar width is not counted (perhaps because the mobile browser has to do it - scrollbars in mobile browsers are "virtual" and placed in front of the document, not outside the document width).
As far as I know, the only way to normalize the document width for the window for media requests in browsers can only be done in javascript due to the way chrome-based browsers handle the scrollbar, which negates in the first place the feed requests passed in CSS.
source to share