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
Related
I have written simple rewrite rules that rewrite .cfm extension links (using outbound rules), and resolve to the full .cfm path with an equivalent inbound rule. Example:
This outbound link:
http://mysite/section/page
Resolves to this full path:
http://mysite/section/page.cfm
When I visit a link without the file extension, in any browser, the page displays on the screen but the browser still seems to 'wait' for the page to finish loading (get that spinning circle in the browser tab, while Firefox says "transferring data from mywebsite...")
After about 5 minutes of 'waiting' for the page to load, the browser will stop trying to load and displays 'cannot display the page' error. I used Firebug's NET panel to see whats going on and basically the page never finishes loading (the size of the file remains 0kb until the browser falls over).
If I go to a fully qualified path page e.g. http://mysite/section/page.cfm then the page loads completely within about 20ms and Firebug gives me the size of the page.
Can anyone please suggest whats going on and how to fix it?
OK I have somewhat solved it, or actually solved it.
Its a ColdFusion issue. If anyone else if facing this here is what you do:
Create an Application.cfc page.
Add this function to your component:
<cffunction name="onRequestEnd">
<cfheader name="Content-Length" value="#Len(getPageContext().getOut().getString())#" />
<cfset getPageContext().flush()>
</cffunction>
So what is happening here is that we are setting the Content-Length header to a correct size because ColdFusion messes it up if you let it do it itself. The cure to ending the never-ending page load is to put the getPageContext().flush() after setting the Content-Length so that the browser gets all the page content.
Frankly I made it work with some Google searching and random hacking. It may not be the correct way to address the problem (because in Firebug it says there is a 500 error going on) but it seems to work.
To reduce the number of requests across our site we are using CSS data-URIs rather than linking to external images. For some reason, these data-URIs are occasionally still being logged as a 404 request against our servers. Why would this be happening?
Random details:
We are using Splunk to track
Happens with multiple data-URIs
Happens on all browsers
On multiple pages throughout our site
Our QA has not been able to duplicate the issue
Below are the results from a specific data-URI
Relevant CSS file - (http://c.mfcreative.com/lib/tgn/combo.ashx?14/css/v1/main.css)
Unminified version of same file - (http://c.mfcreative.com/lib/tgn/combo.ashx?14/css/v1/main.css&minify=false see line 35
Relevant CSS:
body{background:#e2decd url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAGuCAIAAADeSvtRAAAAfUlEQVQ4y9WTzQ7AIAiD+fr+rzzYSeOWGP+z7MABwVJstYiQmf02zvP3yrk2442Gqvijb9LT34tJ7vVP5u/zTBzDP113n/eYCv3ec1IOLGjn1bu9+K0zQEad/4r/iMj8dvLfVqetfcsf5X6z/y7ieuVk/SU19wMesxMXQMANapSO6rYFQnIAAAAASUVORK5CYII=) repeat-x 0 0}
Query to see all our 404 errors (there are 5 data-URIs in our top 10 404 errors):
sourcetype=iis* host=prd*ssscdn* sc_status=404 | top 100 cs_uri_stem
Query that generated the below image:
sourcetype=iis* host=prd*ssscdn* sc_status=404 cs_uri_stem="/lib/tgn/data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAGuCAIAAADeSvtRAAAAfUlEQVQ4y9WTzQ7AIAiD+fr+rzzYSeOWGP+z7MABwVJstYiQmf02zvP3yrk2442Gqvijb9LT34tJ7vVP5u/zTBzDP113n/eYCv3ec1IOLGjn1bu9+K0zQEad/4r/iMj8dvLfVqetfcsf5X6z/y7ieuVk/SU19wMesxMXQMANapSO6rYFQnIAAAAASUVORK5CYII="
Any help/direction at all would be much appreciated!
alt text http://www.jasonbuckboyer.com/playground/blah/data-uri-404-error1.png
I'm in some agreement with the comment Srikanth made. It looks to me like you have something in your code that is affixing /lib/tgn/ to the front of the url string, which ends up putting it before data to produce /lib/tgn/data:image/png, which is invalid.
You need to track that code down and have it ignore the string all together if it is a data uri, while still allowing it to append the image path to images that are saved and accessed in /lib/tgn/ directory.
Added Explanation
Based off your comment, I'm not sure we are quite communicating clearly. What I see in your above posted code for "Query that generated the below image" is this:
cs_uri_stem="/lib/tgn/data:image/png;base64,iVBORw0KGgo... [etc.]"
And the image you posted shows the cs_uri_stem values all having /lib/tgn/ inserted before the data:image/png. Something (perhaps your CDN combination, perhaps url rewrite rules on your server, or something else) appears to be causing that /lib/tgn/ code to be added into the css url() code at process/request time (since it appears that it is not being added directly into the CSS for neither your minified nor expanded code shows it added). But the end result your posted image is showing indicates the cs_uri_stem causing the 404 errors all have /lib/tgn/ added before the data:image/png. So the browser ends up not treating the url() as data because the request is starting with a path, namely /lib/tgn/data:image/png .... Since it believes it is looking for a file starting at path /lib/tgn/ then the browser is putting out a request that (of course) it will never get fulfilled, and thus a 404 error is generated.
Now maybe I am still not clear on what you were referring to in your comment, but perhaps I have made myself more clear as to what I believe your issue is.
In some sourcecodes i see this:
<link rel="stylesheet" href="/css/style.css?201007071609" type="text/css" />
Now is my question: why do people print 201007071609 behind style.css?
This forces the browser to not load the css from cache and rather take the latest version from the server
see related article
Another trick developers do is to add a random string or a timestamp to force refresh the css page.
That's a way to make sure that clients don't cache older versions of the same file. If the URL is different, the client will retrieve the file from the server instead of from cache. So, for example, if a new version of the site was published, that would be a way to make sure visitors see the right CSS.
This forces the browser to retrieve a fresh copy of the file, rather than loading a cached version. This is important when your html has changed and requires an up to date css file to prevent it from displaying incorrectly.
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)
Does anyone have any problems with Page_Load being executed twice in Google Chrome?
It's a short question, i do not know what else to explain...
I have a simple asp.net page and in Firefox and IE all it's working fine.
But in Chrome the Page_Load is fired twice...
Anyone has any ideas why?
Later EDIT:
- what is strange is that i have 4 repeaters... binded with random values. The random methods are twice fired (because of page loaded twice) but the repeaters takes the INITIALLY values...so, the 2nd post back is somehow raised after the rendering step.
3rd edit: It happens ONLY at the refresh!
Solution (in my case): There was an empty img src, and that was the cause
I notice this same issue in IE if the page contains img tags that don't have a src attribute (or the src is empty, etc). Not sure if Chrome does the same thing, but worth checking, right?
For me the problem was because of the extension Firebug Lite for Google Chrome. Once deactivated the page only loads once.
I had a very similar problem:
Chrome and Firefox loading the page twice,
Internet Explorer loading it once.
The problem was because of my .htaccess:
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php [QSA,L]
When the browsers were requesting a favicon.ico, my index.php page was called, thus creating a double access to the server.
My solution was to create a favicon.ico, although I could also had index.php handle that special case, or even .htaccess, but I needed a favicon.ico anyway :)
I had the same stupid problem.
Page loads twice and the updates went blank.
Thanks to this posting I checked my CSS sheet.
I removed this line:
body {
background-image: url();
}
That was the problem
I recently had this issue with Chrome rendering twice too, the cause of this issue is
<iframe src="#"></iframe>
once I set it to
<iframe></iframe>
or completely remove iframe then the double rendering no longer appears.
In addition to Chris Shaffer's answer which got me on the right track, I'd like to add that in my case there was also a <script> tag with an empty src that caused the problem.
Perhaps it applies to all elements with an empty src.
Gecko based browsers apparently do this when the markup is incorrect. That means XHTML AND CSS.
Here is a great post about the issue: http://www.110mb.com/forum/how-to-stop-firefox-dual-pageloads-t27704.0.html
That's why some of you guys are getting the problem when you have a blank src attribute or a blank href attribute. Incorrect syntax, the browser reads it as an "error". I guess it's a more unobtrusive type of error that you would otherwise not even notice, but due to the nature of the page you're working on it's become apparent and presented itself as a rather obtrusive problem.
What certain browsers consider to be an 'error' and what is 'passable' is probably slightly different too, that would explain why some of you are having the problem in FF and not in Chrome and visa versa.
Just be thankful you're not in my shoes. I've got a page that's sending an email out twice due to this issue and there's no way I can fix the bad markup because there's just simply too much of it to fix being generated in far too many places, a lot of the CSS and HTML issues are dynamically driven too unfortunately.
I still don't understand the reasoning behind it grabbing the page twice though when it encounters non-compliant issues of this nature though.
This may be a problem with one of the extensions/plugins. Try out the incognito mode - this helped me once.
Base on Johann's reply, I check and disable each extension in google chrome and discover the flash extension cause my browser reload twice. After remove it, the problem is solved!!
In my case it was this <link rel="shortcut icon" href="#" /> tag in the head of my index.html file:
<html lang="en">
<head>
...
<link rel="shortcut icon" href="#" />
...
</head>
...
</html>
I just removed that line and problem solved.
So far I've used Chrome to test ASP.NET pages many times and never encountered this. What are you doing client-side that could cause this? Are you doing any AJAX stuff?
I noticed that this started happening to me when I switched to Chrome v.4, the developer's channel, so that i could start using extensions. Didn't seem to be a problem with v.3, the stable version.
In your Page_Load, check the value of Page.IsPostBack and Page.IsCallback to see if they differ between the two calls. If they're different, it could be some javascript reexecuting or chrome following a redirect twice or something odd like that.
I encountered a similar problem with PHP and Firefox.
The problem was coming from a faulty style definition that Firefox interpreted to reload the page.
I cannot remember exactly what it was but int the idea, could be something like
.my_class { background: url(#); }
I would advice to try to isolate first your CSS and then your HTML sections to check if the problem might come from it.
If you set your image tag src to # or empty it will cause twice pageload calling, i faced this on chrome and before on firefox.
you can put any char or string value instead of empty or # to solve this issue.
It also doesnt like empty href's
I had an empty favicon link tag and it did the same thing. Whoever said about the empty src put me onto that, just stripped out everything until it started working
I'm also having this issue.
Funny, I added "visible=false" to the whole "form" tag making the page totally empty - it still loads twice. I also tweaked the DOCTYPE, checked the img-tags for empty sources etc. etc. etc.
It still loads twice.
BUT I noticed that this happens on "localhost" only. Remote websites work fine.
I thought may be is has something to do with DNS, but "127.0.0.1" also loads twice. This drives me nuts...
Ran into the same issue. I was using DOM Snitch.
I disabled it and it immediately stopped posting back twice.
After looking at it, it seems to contain 2 tags without an href attribute. Because it's a Chrome extension it's injected into the DOM at the client and I suppose this causes a Webforms page to post back twice.
On the off chance someone sees this, be sure to check any extensions and/or plugins you are using.
I had the same issue. However my "mistake" was located in my css file.
I was using .htaccess to rewrite everything back to my root folder but used
background-image: url('../img/login_facebook.png')
in my css file. I removed the .. and the problem was solved.
Here is another great article on why this occurs: https://www.nczonline.net/blog/2009/11/30/empty-image-src-can-destroy-your-site/
I was getting the same error using Chrome in an ASP.NET site. I was getting the page life-cycle firing again with IsPostBack set to False.
This caused all sorts of issues for me.
I just had the same issue, and once I shut down the JSON Viewer extension, problem was solved.
I can recommend this extension for viewing JSON's without the extra request as side-effect:
https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa
I believe it is just how Google Chrome works. I put some code on my index page to write to a file with the file name that was loaded, and every time I load the page (using refresh or a new window) it puts 2 results in the file.
EDIT: I renamed my index file to test.php and ran it again. This time it only had one result. This problem is pissing me off.
EDIT: I renamed my file back to index.php and ran it. Same problem. Then I renamed my .htaccess (for mod_rewrite) to htaccess so it wouldn't be parsed and the problem is gone. After I found this out, I disabled url rewriting in the .htaccess file and the problem was still gone (finally). I did one more test (if people are still reading this crap) and found that google loads the page twice when you redirect from the .htaccess file. I found a little workaround that seems to fix the problem.
Not sure if this applies to asp.net. I only know php coding and apache servers.