I've noticed that the media query breakpoints get triggered differently in Chrome vs all other browswers (IE9, Chrome, Opera).
Refer to the following screenshots to help explain (please ignore the placeholder pictures). First, where the breakpoint is in chrome:
Now, let's take a look below at where the media query triggers for all other browsers. We will use Firefox as the example, but it is the same for IE9 and Opera.
The differences:
In chrome, the trigger point for the media query is at 1190px. In all other browsers, the trigger point is at 1173px. The difference is 17px.
17px is also the difference between the actual width of the browser
itself. What do I mean by that? I took a screenshot of the point before and after the media query triggers on both Chrome and Firefox. In photoshop, I kept the width of the jpg image consistent for both browsers. For some reason, the media query triggers 17px earlier in every browser except Chrome.
The actual media query CSS 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 there any way to get the media query to trigger at the same point in all browsers?
I think some browsers may count overflow width.
The real difference is the way chrome-based browsers consider window/document width. In chrome based browsers the right scroll bar width is not taken into account (possibly because the mobile browser has to do this - the scroll bars in mobile browsers are "virtual" and placed in front of the document, not outside of the document's width).
As far as I know, the only way to normalize the document-to-window width for media queries across browsers can only be done in javascript because of the way chrome-based browsers handle the scroll bar, which sort of negates the power media queries brought to CSS in the first place.
Related
http://i.imgur.com/WnRm9aw.png
Seems like an issue with line-height. I have line-height:1 in CSS reset, which seems to be causing the issue. However, even when I set up specific line-height (in pixels) to that element, there is still the difference.
When I remove the line-height property from CSS reset altogether, it does indeed make the gap equal in both browsers, however the orange background - parent - gets stretched by 6 pixels in Chrome.
Is there any work-around? Thanks
I have run into many issues in which browsers interpret CSS differently. One option is to see if Chrome is adding extra padding to the element via a user-agent stylesheet, or by its rendering process. If so, you can see try experimenting with this for an efficient solution:
https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-padding-start
Another possibility, which is less desirable would be to do this in CSS (detects webkit browsers i.e. Chrome and Safari) and override padding styles so that they appear the same in both browsers:
#media screen and (-webkit-min-device-pixel-ratio:0) {
.yourDiv {
padding: 2px;
}
}
I have the below media query
#media only screen and (max-width: 800px) {
.class-something {
padding: 30px;
}
}
The above rule doesn't get applied for resolution 800px width. If i give the max-width as 830px(anything above this), it gets applied.
I am using web developer firefox plugin to check the app in different resolutions.
Why is it not applying the rule when i give the exact resolution? Is it a problem with the plugin i am using to test? Has anyone experienced this problem before?
Seems that in firefox the toolbars width affects the viewport width.
Disable toolbars in firefox for testing, in my case I had to disable nav and bookmarks, but when enabled nav toolbar again (to type another url) the issue wasn't present and resizing the window works as expected.
I'm having an issue with media queries. I'm using the Responsive View Tool in Firefox to view my site at 480px. But it seems to be firing at 430px and not 480px. I've no idea why.
/*
* Gird layout for devices above 480px.
*/
#media screen and (min-width: 480px) {
html {
background: red;
}
}
I have no other code or media queries so I'm wondering if this is some type of bug.
Screenshot:
You won't believe this, and I am posting this incase anyone happens to have the same problem.
At some point I had made my browser text smaller using (CMD and - on the Mac). It was breaking in the correct width but because my font size was smaller it was throwing me off. It was actually breaking in the correct place, but the Responsive Viewer wasn't displaying the width based on my font size.
If you inspect the computed witdh of the html element after setting the responsive tool to 480 you will get a value of 465. set overflow: hidden; on the html element then check again and you get 480.
Firefox takes the width of the scrollbars into account when calculating viewport width, as opposed to Chrome which overlays the scrollbars.
check your zoom, if you have zoomed in, width will be off. ctrl+0 to reset zoom to default 100%
I'm using the following code in order to show certain element only in big screens:
.forkit, .forkit-curtain {
display: none;
}
#media only screen and (min-width: 1400px) {
.forkit, .forkit-curtain {
display: block;
}
}
But when the screen is 1300px the element is shown and only is hidden when the width is 1250px so the media query min-width 1400px works also for screen sizes a bit lower what is a bad behaviour.
I don't know why the media query is getting a bad screen size. What is happening?
Thanks
i suspect the difference is not 50px but something closer to 20px. What's more, I suspect that it does not react the same way for all browsers. Try comparing the break points for Chrome and for Firefox. If they are off about 20px, the difference is because:
IE, Firefox and Opera follow the W3C spec of including the scrollbar width in the media query, where Webkit browsers do not.
So when you ask the browser to trigger at 1400px, it will trigger at approx 1383px in most browsers.
You can't force the browsers to treat it the same at the moment, so the best option is to modify your layout so that it is not so tightly tied to the widths in your media queries (add extra margin). With such a layout, when it triggers a few pixels early or late, it won't make as much of a difference.
I have a search box using a mixture of floats of form/select elements.
The search is rendering fine in firefox, chrome, safari etc however IE8 is ignoring the margin and padding rules (tried both).
see here: http://property.begbies-traynor.com
The section in question is immediately below the slider, the search area.
When viewed in chrome for example, the Search submit button is correctly sitting just inside the main container whereas IE has it right up against the side.
Similarly, the Select elements are sat on top of each other despite there being adequate margin rules to separate them from each other.
Any help on this is appreciated.
It is also not working in any other browser not using the Webkit-engine (I've tested it in Opera and Firefox), as you are only including the padding- and margin-styles for Webkit:
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* … */
}
If you want to see your CSS properties working in any browser, you should define them for any browser.