I've been working for a client the past couple of weeks, and I'm absolutely certain that the code I've written has been working fine cross-browser. However, as of yesterday the site has not been downloading content from my server when viewing through Firefox or Safari (to make things even weirder the site loads fine in Chrome / IE).
Update
When I view the site from a proxy, the CSS file listed below loads fine. Now this is getting weird ...
Errors?
Well, as I'm sure many of you would have done I quickly went to validate the HTML and CSS of the pages, wondering if that was causing this issue. But then I ran a test that quite frankly made any validation error unrelated: I tried loading a one-line CSS file directly in my browser.
The link to this CSS file is here
As #Ralph asked below, What is the purpose of supplying us with a CSS file?. The purpose of supplying you with the CSS file is to demonstrate how this one-line CSS file downloads fine in Chrome/IE but not in Firefox/Safari and I cannot understand why that might be.
I do not have control over the server but my client does, and is quite familiar with it. He is currently away so I'm unable to ask him if he's made changes as of 24 hours ago, but I'd like to determine this myself if possible.
Question:
Is there any server configuration that any of you know of that would cause Firefox and Safari to not download both CSS and JS files? I've emptied out the .htaccess file to be sure the error wasn't coming from there.
Notes / attempts I've made
Firefox is retrieving the file (according to firebug, which returns an OK GET Request
The header is text/css as it should be (view the CSS link above and do right click -> page Info
This is an Apache 2.2 server
In Firefox, I've tried to completely re-download the page by doing Control + Shift + R but still, no content is downloaded.
I'm happy to supply any other information as requested.
Thank you for the help.
The problem was that I was using Gzip compression and FireFox / Safari were not working because of it. Removing the compression fixed the problem.
<filesMatch "\.(js|css)$">
Header set Content-Encoding x-deflate
# Header set Content-Encoding compress
# Header set Content-Encoding x-gzip
</filesMatch>
Related
I have been fighting with this problem since some weeks, and after all the researches...., I think I need your help.
It's about my website: shoother.net
It seems to work fine with Safari, but if you use Firefox and Chrome, the icons wont show up. Just scroll down the home page until the last section "Get Connected" or in the about or contact-page.
The problem started while I was trying to solve CDN issues. I wanted to make my pictures load faster, and moved wp-content/upload-content in the main root. Everything worked perfectly first (I even minified the JavaScript files), but then the icons won't load anymore.
I wrote to the theme-support about it, and they told me that I need to enable CORS with some codes (putting it in .htaccess).
I tried a lot to solve this problem. Chrome always responds with
"Font from origin 'http://content.shoother.net' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'xxxxxxx' is therefore not allowed access."
.... I really hope you guys can help me.
Regards,
Natts
So there is this site-> http://www.raudsilla.ee
This problem occurs only in Chrome- whenever you press refresh the page loses its CSS. Weird thing is that if you look the code of both- after and before refresh, they look exactly the same. And again, only happens in chrome.
I have tried quite may things, so far no luck...
I wouldn't like to rule out anything at the moment, so any help appreciated.
The browser is outputting javascript errors, if you check the code, you're calling jQuery's document ready before the script is loaded, as it says, "$ is not defined".
After fixing the existing javascript error, it should load correctly.
I am seeing the same behavior on one of our own sites and started looking for a cause. The only conclusion I could come up with for now is that it is caused by the Mime Type of your stylesheet. This conclusion is supported by the behavior on our side.
Update:
There are three ways in which Chrome seems to load the CSS file:
As a fresh request, no cached version available, our server returns HTTP 200 OK, with content-type text/css. This works fine.
From the cache, without consulting the server. Chrome has cached content-type text/css. This works fine.
As a request with a cached version available. Our server returns HTTP 304 Not Modified, with content-type text/plain. This does not work.
After some crazy tests, I found the solution by adding "?" to the url css file.
Example: href="../_css/setup_system.css?" type="text/css"
site.css was not loading in Chrome. I added the ? in the CSS url and my styles started appearing.
Shift + Refresh solves the problem so it must be a cache problem.
PS . The site takes quite a long time to load, considered optimising?
desable addblock and refresh, if the website loaded correctly check the plugin
Open the console(ctrl + shift + c) and then network panel and check the disable cache button.
I thought I have somehow found a solution to the very vexing problem with Firefox and CDN-hosted fonts access, but here comes IE9.
I recently found a very frustrating issue with IE9 caching problem, and chanced upon this blog post (IE9 Redirect Caching Nightmare) which enlightened me more about the actual issue.
I have to admit that I'm not sure whether the above mentioned is actually the issue, but it seems close enough.
Problem:
I have a website set up with 2 domains(base domain and subdomain) pointing to the same server, serving the exact same website which is using a same set of resources from a CDN hosted on Amazon S3, served by Cloudfront.
https://example.com
https://www.example.com
I get these kind of error messages in my IE9 developer tools console when loading fonts from my CSS file using #font-face:
CSS3117: #font-face failed cross-origin request. Resource access is restricted.
This happens when I loaded either of the URL first, then visiting the other second. IE9 is not running in Compatibility Mode. It running is in Document Mode: IE9 Standards.
From my limited understanding of the CORS and the need to set Access-Control-Allow-Origin HTTP header, I have dutifully set it up in S3 CORS policy, and it works perfectly fine with Firefox.
Requests from both domains, will get their respective header when requesting the CDN resource.
It seems that IE9 tried to do some optimization with caching, and cached the redirect too.
This causes a problem as the Access-Control-Allow-Origin header is cached as well. Without sending a request to the CDN server, the Access-Control-Allow-Origin header cannot change for different domains.
So I'm left with a situation where the request is from https://www.example.com and yet the Access-Control-Allow-Origin is https://example.com. This leads to the restricted resource problem with the error message above.
Further look: I did a check with Firefox 19, the above situation actually occurs, but it does not encounter the same strict restriction as IE9. Subdomain (https://www.example.com) requesting information will accept the access-control-allow-origin of the main domain(https://example.com). Chrome (Webkit) doesn't seem to care. I'm at a loss about which browser's behaviour implementation is correct.
With my current settings in the CDN, it seems like Chrome and Firefox, automatically reroutes allwww subdomain requests to the main domain. Only upon multiple attempts of inputing the www subdomain in the address bar, then will Chrome and Firefox obey. IE9 on the other hand, just goes to whichever address is typed in the address bar. IE9 seems to be the odd one out here, but I'm not sure which browser's behaviour is actually correct.
From a usability standpoint, Chrome and Firefox seems to be the "correct" behaviour.
Known Possible Solutions:
Set Access-Control-Allow-Origin header to allow all, i.e. *
Turn off caching in the browser
Redirect one domain to the other
Use query string to differentiate different domain calls for resource
Embed the font into the CSS as data-uri
For solution 1, let's just say I'm paranoid that I just want to set specific domains to allow.
For solution 2, is not optimal if I were to set it for all browsers, also my site has to run on mobile devices with usually less-than-desirable download speeds.
For solution 3, possible, but I'm still curious for solution to deal directly with the IE9 caching issue.
For solution 4, it is very hard to implement especially when the resource is called from #font-face. Does it mean that I'll have to dynamically re-generate the CSS for different domain calls for the different line just to load a font to bypass the issue? Seems to defeat the purpose of CSS itself, and caching resources for that matter.
edit: Stylesheet works, font-loading doesn't.
For Solution 5, it is tedious for maintenance and updating, especially when there are changes to the font files periodically.
Question: Are there any known ways to deal specifically with IE9's redirect caching behaviour in this particular case?
Answers and comments are very much appreciated. Thanks in advance!
Edit: More browser test information.
Solution 1:
Check this question.
Solution 4: rename your CSS file to style.php and use whatever code you need to call the appropriate resource.
Set the content type at the top of the page.
<?php
header("Content-type: text/css; charset: UTF-8");
?>
More info about style.php from Chris Coyier.
We discovered the same weird behavior also in IE10 and IE11.
Resetting the browser cache makes the fonts to be loaded without any problem. Also enabling and disabling compatibility mode.
But when switching to another subdomain, IE does not render the font because request header does not match the response header which is still the URL of the last request. And IE always shows the full URL for even if the definition on the bucket is *.ourdomain.com
So the general issue with allowing cross origin requests to assets like webfonts was solved by adding CORS permissions to the S3 Bucket - that made the webfonts work perfectly in Firefox.
But we still have no idea how to avoid * and tell IE not to cache the response headers.
I have a blog located at http://air2airheatpumps.co.uk/wordpress (note the lack of a www.)
I have installed wordpress via the 123 reg control panel and as you will see for some reason its missing all the relevant styling, i've checked file permissions, reuploaded the themes etc and for some reason it just won't style. The site_url in the database is also correct.
I've also used chrome's inspector to check for any errors and can't see anything immediately obvious.
Any ideas?
Thanks
Marc
These are some general guidelines when dealing with problems like that:
Use the developer tools of your browser (Firebug, IE Developer toolbar or the Chrome Developer tools) to check for the most obvious errors (like wrong filenames). There is no reason to not use them.
The developer tools most probably highlight files which can't be loaded. Most of the times this is the result of an incorrect URL (like a misspelled filename).
The Content-Type of the files must be correct, otherwise the browser might ignore the contents of the file:
text/css for CSS files
application/javascript (text/javascript is apparently obsolete)
Use the developer tools to check what the server sends to the browser.
If for example HTML code is sent when loading a .css-file, there could be a rewrite rule which redirects everything to the index.php.
I'm using the WebDevHelper toolbar for Internet Explorer to troubleshoot HTTP requests/roundtrips on my SSL site and noticed that IE re-downloads my CSS :hover images every time they are triggered. This causes a huge amount of roundtrips.
How can I prevent this from happening?
Edit: All static content is served with cache-control: public, so images, javascript etc. are cached in Firefox and Chrome. This problem is IE specific.
Serve static content via http, sure, but don't do separate images for :hover states. Proper css image sprites should be used. It's just good practice all around, via https or http. There are tons of resources available for creating sprites. Supposedly SpriteMe, [ http://spriteme.org/ ] is an attempt to automate css image sprite creation.
If the images are being delivered from a different hostname than your main page, then you're hitting the artifact described here:
http://blogs.msdn.com/ieinternals/archive/2010/04/21/Internet-Explorer-May-Bypass-Cache-for-Cross-Domain-HTTPS-Content.aspx
Well there are multiple issues according to other Stackoverflow posts. FireFox 2.x also has this problem. But FireFox 3.x doesn't.
Will web browsers cache content over https
Also in Internet Explorer, you go to Tools > Internet Options > Advanced tab > Security section > Do not save encrypted pages to disk. It appears to be unchecked by default in IE6, 7 and 8.
Content served via SSL will not be cached for security reasons. If you want something to be cached, serve it via HTTP.
Have you tried adding to the header for those type of static files.
P3P: CP="CAO PSA OUR"
I know this works with in IE to allow storage of cookies through framesets and stuff. Not sure if it works with static files under HTTPS.
I know it sounds weird...
try to put a url to something that isn't exists (404 error). after this, all the rest of the images will be cached.