We have a major problem where for some reason Chrome is firing responsive Media Queries too early.
So instead of firing at 1000px, it fires around 984px. Max width/min width containing any value makes no difference. It's as though it's off by about 14 to 24px depending on factors only it understands.
There are also no conflicting queries that could be causing this (we tried it on 'fresh pages' in the project) and even nuked the main stylesheet, but the problem still persists. Also we're not doing anything funky by manipulating window/document or body widths, margins, scale/zoom with Javascript or CSS.
We're completely baffled by this one and have tried for a few days to fix + check Stackoverflow etc. but to no avail so far.
Code below:
div {
background: orange;
}
#media only screen and (min-width: 1000px) {
div {
width: 100px;
height: 100px;
background: green;
}
}
Some things in place and background:
This worked previously, however all of a sudden we're encountering this bug...
It is happening in Chrome and Brave, but works fine in Edge and Firefox. We've tried several other machines and different versions of Chrome, but the issue persists. We can only guess that maybe something got introduced into the project that is causing this, but we are stumped as to what.
Browser zoom is correct # 100%
Meta tag viewport is in place correctly
Tried the 'decimal fix' like 1000.0px - but it doesn't work...
Dev tool says that the window size is 1000px, but Chrome only fires the code at 983px or thereabouts
Code works in a test file (with the same index/template that is in the project) and Chrome handles the media query 100% correctly
React Solution with Bootstrap 4.5.3
Worked before
Any ideas?
Is there a way that we can 'reset' Chrome's media queries or what are we missing?
Answers in other similar questions in StackOverflow do not appear to work which makes us think that this is maybe a separate issue or new bug?
Any help / insight is greatly appreciated! :)
Perhaps your meta tag is missing the content attribute with values: width=device-width, initial-scale=1?
<meta name="viewport" content="width=device-width, initial-scale=1">
as far as i can recall chrome requires these attributes and values to work proper with custom media queries
EDIT
After a discussing with #user2381937 in chat and reading some external resources:
https://inspirnathan.com/posts/2-media-query-inspector-chrome/
https://www.sitepoint.com/rwd-scrollbars-is-chrome-better/
we found that chrome and firefox differ in how they consider the width of the scrollbar when rendering the page. And that the way forward is either to swap query breakpoints to account for the offset or to make browser specific queries.
Related
I'm having multiple projects now who's media queries are acting weird. for example:
#media only screen and (max-width: 891px) {
.lang-selector {
top: -150px;
}
}
This only loads starting from 801px and less, although I do not have this media query set in my SCSS (it should be starting from 891px).
Console output:
I'm working on Windows 10 and I get the same result in Firefox, Google Chrome, Microsoft Edge.
I don't think it's to do with your media query. I took your media query in code pen and performs just fine. Perhaps look at other elements and queries that may be impacting this class.
Example where the text turns red
Ok, apparently, today my problem seems to be fixed.
The most logical reason should be that my browser was not at 100%, although I'm not sure because yesterday I checked that. Maybe a reboot fixed the problem...
I'm trying to change what shows up in the margins when I print out a page from my website. I've read here that it should be possible to set the content of "page-margin boxes" like so:
#page {
#top-center {
content: "Page " counter(page);
}
}
...But no matter what I try, this style seems to be completely ignored. I've tried in Chrome, Firefox, and Edge. I'm starting to wonder if the print preview functionality each browser has is somehow overriding this, as they provide their own margin content?
Has anybody ever got this to work? I assume the major browsers should handle this as caniuse.com says so (I blindly believe it :) ) and multiple examples I've found online imply that others have met with success.
In case this helps anyone, I've found that most modern browsers - including all three I tested with (Chrome, Firefox, Edge) - do not support #page margin boxes at this point in time!
I learned this from user alex's comment on an answer to another SO question here -
Page numbers with CSS/HTML
And his source was https://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)#Grammar_and_rules
Background
I've built a responsive website template. I've chosen to use Bootstrap 2.3.2 because it needs to work in IE7+ and be suitable for mobile devices. I've used respond.js and html5shiv.js so that it will work in IE.
Problem
The site works beautifully in Chrome and Firefox. And it displays well in IE8. However in IE8 it's incredibly slow. Even after the page has finished loading the browser freezes up if I try to scroll down or click on something. It looks great but the slow response time makes it virtually unusable.
Cause of problem
I've identified that Bootstrap.min.css is the cause. When I remove bootstrap.min.css from the page and leave everything else the same, the styles don't work but the page loads quickly and it's very quick to scroll up and down and click on buttons.
I think (or rather I hope!) that the cause is not Bootstrap but rather because I'm using the responsive elements of Bootstrap (e.g. row-fluid). I'd like to keep the site responsive for all non-IE users, but I'd like to try making all widths fixed for IE8 users and below.
Attempts to fix
I've tried overriding the percentage widths in IE by creating a conditional IE stylesheet. However it doesn't appear to be possible to override the media queries, even using !important (example below).
HTML
<div class="row-fluid">
<div class="span10 width7">
</div>
</div>
Bootstrap
This is an example of what I've been trying to override.
#media (min-width: 1200px)
.row-fluid .span10 {
width: 40.92827004219409%;
}
CSS to override Bootstrap
The code below is not able to override the bootstrap css above.
.row-fluid .span10.width7{
width: 485px !important;
}
Question
Has anyone got any suggestions about how I might adapt my template so that it continues to be responsive for non-IE users but has fixed widths for IE8 and below?
Many thanks,
Katie
I'm new in this area and I wrote a div style which didn't work properly for firefox 4, opera 11.1 and for ie 8.0 but worked for chrome 11. The code which was a style for a div was the following only with a different order
#info_text
{
background:#fdf6cc;
width: 650px;
margin-left:1px;
padding-left: 30px;
padding-right: 263;
min-height: 90px;
}
After changing it this way it worked for all the browsers except for the Internet Explorer 8.0.
Can I do something to make it work or it's the problem of the browser?
Does it metter the order in this case?
The order doesn't matter in this case.
You are missing units for the padding-right property. Running your code through a validator will flag errors like this.
Welcome to world of web development! All browsers interpret CSS differently, particular old versions of IE (try the above in IE6 for some fun!)
To understand exactly what problems you're having we need to see a working web page with the above.
The order of the CSS doesn't particularly matter to be honest, though obviously later CSS overrides earlier CSS and this something which is used commonly in the industry.
try opening "developer options" under "tools" in ie, if there is a more specific class, it may be overwriting something, or if something is formatted poorly, IE may be excluding it all together. Another option is "firebug lite", firebug is a very useful tool for getting started with css, javascript, and page structure. Without a link to the page that you are having the problem on, it's very hard to determine the cause, I copied your css and tried it myself, but got the expected result in all browsers
I need to prepare print css style for some page. It's possible to have footer on every printed page?
I tried the code, I've found on the web:
display:block;position:fixed; bottom:0px;
but it works only in Firefox.
I can try to fix it with table, but in Q. here: CSS: Repeat table headers in print mode is info, that it doesn't work in IE5 (maybe I made some error, but it seems, that it doesn't work even in IE7).
Does anybody fixed problem with printing footer on every page in IE? Doesn't matter if with tables or without them.
Thanks for help.
I do not think it is possible to print headers and footer using IE current, since Even in IE8 it is compliance to CSS 2.1. But there are other tweaks to get around the problem. Hope this URL will help: http://msdn.microsoft.com/en-us/library/dd433064(VS.85).aspx.
PS: The URL you referenced, on the bottom of the page specifically said works only on safari.