I'm making an app with node.js and have a few html pages that are styled with one css file. After I click on a link (to a subpage) on the home page and open it in a new tab, everything seems fine. However, after I push ctrl+F12 and open the console, the css styles somehow 'stop working', which means:
the elements are not styled, even though there is the link tag with style.css in 'Elements' tab in html
In Network tab, I can only see style.css file with status 304 listed there (all other js files are not there, even though JS scripts work)
When I return to the home page, the css styles are not visible as well (they were before new tab was open, now it's 304 status in Netwok). After refreshing, styles go back (along with status 200).
After I refresh the subpage, everything is fine again, opening console does nothing to styles (Network tab shows all the files, including style.css with status 200). After closing/ opening console again, everything is okay too.
If I dont't refresh the subage, the styles "come back" when I change window size (although not immediately, after a second). Otherwise there's just html with working js scripts.
This happens only in Chrome (version 53.0.2785.101), only after opening console for the first time. I have no clue why this might be happening.
Please help!
Ok, I managed to solve this. This issue seems to be Chrome bug, discussed for example here:
https://bugs.chromium.org/p/chromium/issues/detail?id=647151
https://bugs.chromium.org/p/chromium/issues/detail?id=648023
I am not sure whether my solution is perfect, but it now it seems to work. I just added one option into express.static in my server.js (I use Express JS):
app.use(express.static('public', {maxAge: '5d'}));
I guess the max-age property is crucial here - it's specified in Cache-Control http header (you can see this in Dev Tools console in Network tab, after clicking on given file). Found this solution mentioned in the first link. If I see further issues, I will update this answer.
I'm sorry I can't explain this problem in details.
Edit: this solution has one major flaw: when I edit my files, the browser still loads the older versions. Therefore, I turn this max-age property off when I wish to see the changes in files. If anyone has better fix, please share.
Try clearing your cache in chrome, then restart chrome and try again.
(A 304 response header is not an error necessarily. It just means that the browser should load the resource from cache. Basically the browser says "Hey, Can I use the same copy of that CSS file that you gave me last time, or has it changed?" and the Server says "It hasn't changed, go ahead and use the copy you have" AKA 304)
If that doesn't fix the issue, you may look into ETags
Related
I have built a stylesheet but it doesn't appears on the page on the first load. It needs a reload to appear properly. However when I look to the source download on the dev console's network tab, I see the CSS is well downloaded. So what can lead to the non-display of my CSS on the first load since it is well loaded in a CSS module-hash's mode ?
Any hint would be great,
thanks
We're having a weird problem at work that happens only in chrome. It looks like the css file is getting cached and the content of this file isn't getting re-downloaded.
The problem is that when using a fresh session for example "private session", the image "mainSprite.png" isn't getting displayed.
After some tests, I believe the problem is related to us doing redirects at the beginning if the user isn't authenticated. From what I understand, it might not complete the download of the sprites linked inside the css files. It will cache an invalid object as soon as the redirect starts and then on the following pages, it will fail to display a correct image since it cached something wrong.
The strange thing is that it actually loads the image completely at some point. But it looks like it's not refreshing it in memory...
I did a timeout of one second before starting redirects on first load and images correctly display. This is a quick fix and I can't expect every computer to load in 1 second every images contained in the css.
edit
As far as I can say, it really looks like a race condition. I changed the order of loading. We use require.js. Instead of loading js after css, I start js loading before. And images are getting loaded correctly now on my local server.
if someone is interested to look into it:
http://api.checklist.com
edit 2
When images aren't visible, opening new tabs will have the same problem. Closing the browser and reopening it will work on first load and images isn't being downloaded but loaded from Cache which means that before closing the browser, the image was indeed downloaded.
It looks like the problem coming from your redirects unfortunately i couldn't see your example ( link won't open ). Google chrome has indeed issues with caching it's annoying during development time ( clear up the cache, load new image, do the same for new image..), if you need to clear your cache try the folowing:
try to go to
chrome://chrome/settings/clearBrowserData
in your chrome browser and check the options:
Empty the Cache( i have also Clear download history and Delete cookies and other site and plug-in data )
click on 'Clear Browsing Data' button it should
All what you need to do is to trace your cash list via chrome, and from what I see is that you got this error which make it not cached:
Uncaught TypeError: Object [object Object] has no method 'placeholder'
So if you want to trace, you can use the manifest offline mode or you trace via your code.
Just following and test your page, I did catch where the error is:
file: scripts2.js Line 20 --> $('input[placeholder]').placeholder();
which you need to check the name of the place holder and change it here in this tag.
Thank you
I assume your server/backend app has routes set up. Like this Play! framework example:
# Ignore favicon requests
GET /favicon.ico 404
# Map static resources from the /app/public folder to the /public path
GET /public/ staticDir:public
# Catch all
* /{controller} {controller}.index
According your summary I suggest to set up a static folder route (where the images are) in config file or htaccess as you want, then check image url in browser url bar (with empty session). That should work!
First I would suggest that you first try to find ways to narrow the redirects. If it possible I would suggest that it would be much more advisable to try to create your content dynamically based on your users authentication using languages like PHP or ASP (just to name two).
The classic way of disabling the caching on a webpage is to set two <meta> tags inside of your <head> </head> tags. However, you should note that these are technically not "correct" as they are not part of any of the "offical" standards documentation. This also means that I would again lean towards my first suggestion of finding a better delivery system which in turn should prevent the problem.
So for "testing" purposes the tags would be:
<HEAD>
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="EXPIRES" CONTENT="0">
</HEAD>
Maybe I don't understand your question or dilemma (maybe because of lack of explanation or because I can't see your page at that link since I run Chrome), but there's an example I ran across here that works in Chrome by just using Javascript/jQuery to load, instead of CSS:
http://jsfiddle.net/2Cgyg/6/
Use image at URL: http://www.w3schools.com/cssref/img_tree.gif
And although the accepted answer didn't work for me in Chrome, this is the question I got the jsFiddle above, from:
Load Image from javascript
All the caching, etc. is unnecessary, and even something you wouldn't want to do if your images are ever updated to something else - they won't appear without forcing a refresh which you can only do through altering the file name like this to avoid users not seeing your updated image:
myPic.jpg?MMDDYYYY
And you could set the date according to the date you are modifying it.
clean your browser history like cache,cookies
clean the temporary internet file
if problem not solved then reinstall browser your problem is solved definitely
When I update a js file in my asp.net project, I refresh the browser and the change shows up as expected. If I change a css file or an .aspx file, the change does not show in the browser. Not when I clear the browser's cache, not when I restart IIS (iisrestart). What could this possibly be?
PS. I have tried chrome and firefox
Your browser loves to cache files such as CSS, JS and XML docments.
Do a "hard refresh" to tell your browser to download everything again.
Typically, it's CTRL-F5
You can also append a random number to the end of the file name so that it's never the same and the browser will snatch it up each time.
I have observed weirdness like this in chrome, but not firefox.
When you open it in firefox with firebug, are you seeing a 304 code? That might help separate server side issues from client issues.
I've had this problem a couple of times. Adding a random querystring value on the end of the URL for CSS seemed to fix things. So if your URL was /css/styles.css, just put in some code to add a random number on the end so the URL looks like /css/styles.css?random=2345.
We've reached the end of our tether here trying to overcome a nasty and intermittent FOUC in Firefox 3.5.x+ for a new release we're working on.
We've tried:
Disabling Javascript in FF
Using Quirks mode rendering by removing the DOCTYPE
Moving from #import for additional CSS to <link>
Switching concatenation on and off
Removing CSS files from the concat, one at a time
Switching the local cache off in Firefox
etc
Our previous release never exhibited any FOUC issues, so it's something we've done to this release. Changes we've made so far include:
Using Base64 encoded images over Data URIs for all decorative imagery, served via CSS.
Separating 'framework'-related CSS files from page-specific CSS and bundling them as two separate CSS files
To recreate the problem... use Firefox 3.5.x or 3.6.x, then:
Head on over to: http://my.publisher-subdomain.env.yola.net/
Login with username: 'stack#yola.com' and password: 'stackoverflow'
Once logged-in, you should be at http://my.publisher-subdomain.env.yola.net/sites/
Click the Account link in the main nav.
The Account page should load, and you should see a FOUC. If the FOUC does not occur, clear your cache and reload the page.
Your help would be greatly appreciated! :)
UPDATE:
The dev environment is still exhibiting the FOUC, but only if FireFox is running low on memory or has a lot of extensions installed. Latency and rendering speed definitely affect the visibility of this FOUC.
Although this is a very old question, I found it when I was searching for a solution to the same problem. So, I wanted to post the solution for future reference. I just needed to move the reference to my CSS files above the references to external Javascript that needed to be in my header.
I can be wrong, but this could be a concurrent connections issue. According to my Firebug's "Net" tab
the HTML page simply takes a lot of time to load - maybe also because it is on a development server? - and the style sheet gets loaded after the HTML page.
I can't claim to entirely understand what's happening here, but I would try putting the style sheet onto a different domain as a first measure. That should make Firefox establish a connection straight away.
It would probably also be a good idea to go back to normal images instead of data: URIs - that would reduce the size of the style sheet, and data: URIs won't work at all in IE < 8.
When I make any changes to my CSS file, the changes are not reflected in the browser. How can I fix this?
The fix is called "hard refresh"
http://en.wikipedia.org/wiki/Wikipedia:Bypass_your_cache
In most Windows and Linux browsers: Hold down Ctrl and press F5.
In Apple Safari:
Hold down ⇧ Shift and click the Reload toolbar button.
In Chrome and Firefox for Mac:
Hold down both ⌘ Cmd+⇧ Shift and press R.
Try opening the style sheet itself (by entering its address into the browser's address bar) and pressing F5. If it still doesn't refresh, your problem lies elsewhere.
If you update a style sheet and want to make sure it gets refreshed in every visitor's cache, a very popular method to do that is to add a version number as a GET parameter. That way, the style sheet gets refreshed when necessary, but not more often than that.
<link rel="stylesheet" type="text/css" href="styles.css?version=51">
A good way to force your CSS to reload is to:
<link href='styles.css?version=1' rel='stylesheet'></link>
And then just increment the version number as you change your CSS. The browser will then obey. I believe Stack Overflow uses this technique.
I always use Ctrl+Shift+F5 out of habit, it should force a full-refresh including by-passing any http proxies you may be going through.
I had this issue. Turns out I completely forgot I had CloudFlare setup on the domain I was live testing on.
CloudFlare caches your JavaScript and CSS. Turned on development mode and BAM!
Do Shift+F5 in Windows. The cache really frustrates in this kind of stuff
This sounds like your browser is caching your css. If you are using Firefox, try loading your page using Shift-Reload.
Having this problem before I found out my own lazy solution (based on other people suggestions). It should be helpful if your <head> contents go through php interpreter.
To force downloading file every time you make changes to it, you could add file byte size of this file after question mark sign at the end.
<link rel="stylesheet" type="text/css" href="styles.css?<?=filesize('styles.css');?>">
EDIT: As suggested in comments, filemtime() is actually a better solution as long as your files have properly updated modify time (I, myself, have experienced such issues in the past, while working with remote files):
<link rel="stylesheet" type="text/css" href="styles.css?<?=filemtime('styles.css');?>">
The Ctrl + F5 solusion didn't work for me in Chrome.
But I found How to Clear Chrome Cache for Specific Website Only (3 Steps):
As the page is loaded, open Chrome Developer Tools (Right-Click > Inspect) or (Menu > More Tools > Developer Tools)
Next, go to the Refresh button in Chrome browser, and Right-Click the Refresh button.
Select "Empty Cache and Hard Refresh".
Since I found this thread having the same problem, 10 YEARS later, I'll add my own solution too. I use PHP most of the time, and rather than requiring the user to press unusual buttons to refresh the page, or myself to remember to bump a version number embedded in a link, I used the filemtime() function to get the modification time of the css file (as a unix timestamp), and then use THAT number as the parameter.
$FILE_TIME = filemtime("main.css");
$CSS_LINK = "main.css?version=$FILE_TIME";
While results in a URL like:
http://example.com/blah/main.css?version=1602937140
This entirely disables caching, since every time the page is refreshed, it will believe it needs to grab the CSS file again, changed or not... but that's far less frustrating than forgetting to manually update this trick and wasting time wondering why it isn't right. You can always remove it from a production server.
If you are using plain HTML, you could probably engineer a javascript wrapper or some such, but that's probably more trouble than it's worth.
Have you tried renaming the new version of your CSS to CSSv2.css and then directing your page to use that? If that solves the stale-file issue, then you're just experiencing non-refreshing files. If not, you've got bigger issues.
If you're using ASP.NET web forms, make sure that you are using the right theme:
I just spent about an hour trying to solve this!
Is this a local custom CSS file? Is this your website? Maybe you should clear your cache.
Also the last CSS declaration takes precedence.
I faced the same problem. Renaming the file worked for me.
The reason this occurs is because the file is stored in the "cache" of the browser – so there is no need for the browser to request the sheet again. This occurs for most files that your HTML links to – whether they're CDNs or on your server, for example, a stylesheet. A hard refresh will reload the page and send new GET requests to the server (and to external b if needed).
You can also empty the caches in most browsers with the following keyboard shortcuts.
Safari: Cmd+Alt+e
Chrome and Edge: Shift+Cmd+Delete (Mac) and Ctrl+Shift+Del (Windows)