EDIT: Please stop suggesting to clear the cache. That will obviously not solve anything for the users who may have visited the site before.
I know how to force the browser to use the latest CSS version. This is not what I'm asking.
I also know how to clear the cached images on the browser. This is also not what I'm asking.
I also know this could be solved by changing the name of the image. I don't want to do that.
It surprises me not being able to find an answer to this issue anywhere since I came across this problem multiple times.
When replacing an image such as a logo that's on every page of an old website, you may want to simply replace the image without changing its name so you don't have to change the image name on every HTML page.
The problem is that Chrome continues to show the old version of that image no matter how many times you refresh the page.
It's the only browser I know that does this. It's incredibly annoying.
Isn't there a way to force Chrome to show this change, or even request Google to update the image that has been replaced?
Thanks.
ctrl shift i (to open the developers tool)
click network
check the disable cached data from the top of the window
or u can use the shortcut i think ctrl R (i am not sure of it) but using the developer tool ->network ->disabling cache then refreshing the page works fine 100%
Related
I must have some sort of caching issue. I wrote code to create a download button. The button is meant to exist in 6 different colors, for 6 different topics.
Offline, in Local the CSS rules I wrote, display just fine. The button appear in the 6 different colors according to topic (screenshot 1). However, when I upload and update the CSS file to the live website, it doesn't work. The button appears in just 1 color everywhere and centred (screenshot 2).
It's a wordpress website theme, so I purged the cache. I'm using CMD+SHIFT+R to do a hard refresh, I've tried firefox, chrome and safari - also incognito. Nothing.
The width I chose is 250px and on chrome-developer tools it shows 30%.
Based on that I know that chrome uses an older stylesheet. Even if I change the css classes, chrome refuses to adopt the new ones. Also after a week of waiting - for an automatic refresh, the old CSS is still there.
As I said, I already purged the cache and did hardfresh, not sure what else there is to do. Anyone got an idea?
Screenshot 1 - how it's supposed to look
Screenshot 2 - how it currently looks
The actual CSS
CSS that chrome shows
Like ivvija said in the comment. Use a version push on the including URL of your CSS.
<link rel="stylesheet" href="https://yourdomain.com/css/style.css?v=1.0.1a" />
If you have made changes and it doesn't show up, change the version and it should push the new version. This also works for included javascripts btw. It's wise to use this always, specially when you are done with a development change. Else your visitors could experience the same problem. ✌️
I'm an amateur web designer with HTML experience mostly. I'm building my own website for a hobby, and ran into this snag. I've only recently noticed it though, so I'm wondering if it has anything to do with the recent iOS update?
Like the title says, when I go to my website, everything is fine. Then I click on one of the links to the "Contact" page, let's say (or any of the links that take you to another page), and then hit the browser's back button to go back to the previous page, the button's image I had just clicked on ("Contact" button) has disappeared and I'm just left with the button's name I named it. This repeats for every button I click and then hit back in the browser. This only happens on mobile devices though (I've only had the opportunity to check on an Apple phone and iPad). It doesn't happen on my laptop. I've tried searching for answers to this, but can't find any. I've only just noticed this happening though, which leads me to believe it might be a software update issue? Although it's entirely possible I just never noticed before.
Here is my website so that anyone interested in helping can take a look and let me know what you think might be the problem/solution. Thank you very much for any help you may be able to provide.
https://www.atomicorchard.com/
It's okay on my end. Try optimizing your images and check your JavaScript. The problem may be occurred once that script is being executed. And try adding media queries.
I usually have three chrome windows open. To easily distinguish my work chrome from the personal chrome window, I would like to set a theme to one window, and another theme to other windows.
I figure out how to change the theme globally, wondering whether its possible to it per window.
Use different profiles. You can do this in chrome by clicking the Proflile icon in the top-right of any window. It'll ask you to log in with your Google account but you're able to make a local account with any name.
I use one for personal (personal google account), one for work (work google account), and a third with no google account for risky or other website browsing (which has more aggressive blocking rules)
I do have in mind 2 options, since I really want to easily identify them.
You can add name to your window, not so noticeable since only shows on hover on mac.
You can also group all the tabs in that window, to give it a bit of a different color
which you can see here. blue and red. Bit noticeable.
for windows users, can you try this options, it might be better there.
I did some research into this issue, and it seems the only way to do this is to open different browsers e.g - firefox for presonal stuff, chrome for work etc...
will be happy to see a better solotion though...
I've been setting up Pinterest for a web site and it all works up to the point when you finish pinning an image. I always get "Whoops Sorry we could not fetch the image"
First I tried to directly assign the pin-it button to one of my images by setting the media parameter, which opened a pop-up with the description I provided. The image in the thumbnail area was displayed correctly as well, but Pin-It would result in the error message mentioned before.
Looking further into this issue I found 2 interesting sources on the Internet: This blog article recommended checking the .htaccess file of the Apache in case Pinterest gets blocked in some way, which isn't the case for me. I'm not blocking anything.
Another article gave some more useful information pointing out that the image has to be visible and exist with an <img> tag on the page (and fulfilling a couple of other criteria). Applying all those suggestions (e.g. image size of 400x500, visible, etc.) still wouldn't work. I went as far as just putting a plain image in the middle of my page and tried to Pin it, which still failed!
Then I tried a pin-it button with just the URL and let Pinterest fetch the images, which worked as flawless as the popup before up to the point when I finally finish the pin-it and it fails to retrieve the image...
Anybody got any suggestions what else I could try? I do run my Apache on port 88 instead of 80, but I couldn't find anything that this is related to the error. Anything else? If further information is required I can provide them.
There is a minimum and maximum size for an image that Pinterest will allow. I also found in the olden days ie a couple years ago there were characters in the image name that Pinterest did not like. I think they fixed that issue, but make sure your image is not tiny and not 5000 pixels wide.
The image does not have to be in an img tag, you can specify which image gets pinned in structured meta data, thus making it possible to display on your website an image in one size and give Pinterest a completely different sized image. You can use the same technique with Facebook, Twitter, Google+ assuming you get your structured meta data correct, you may also have to be "approved" to use Rich Pins/Twitter Cards.
Turns out Pinterest works fine on the production server, where we're using port 80. So the usage of port 88 might indeed have caused the issue.
It is a different environment though, so other factors might play a role as well.
I experienced the exact same problem but found that it was actually due to formatting in of the image's source tag.
Mine referred to ../images/example.jpg, which displayed perfectly, allowing you to get as far as it showing in the Pinterest dialogs, but as soon as I altered the source to simply images/example.jpg, removing the unnecessary ../ it began to work.
I have a large, hi-def JavaScript-intensive image banner for a site I'm designing. What is everyone's opinion of using iframes so that you incur the load time only once? Is there a CSS alternative to the iframe?
Feel free to preview the site.
It is very much a work in progress.
I should also have mentioned that I would like the banner rotation to keep moving. When the visitor clicks on a link, the banner rotation starts over. It would be nice if the "animation" kept rotating, regardless of the page the user visits.Blockquote
Well, in that case I would strongly recommend not doing that. The only real way of achieving that is to have the actual website content in the iframe, which means that you suddenly have lots of negative sides to the site: not being able to bookmark urls easily due to the address bar not changing; accessibility concerns; etc
I think you'll find that most people won't care that it reloads again. Once a visitor lands on your website, they'll marvel at the wonderful banner immediately, and then will continue to ignore it while they browse your site - until an image they haven't seen appears and distracts them away from your content.
Keep the rotation random enough, and with enough images, and people will stop to look at it from whatever page they're on.
I find the main challenge with iFrame headers is resizing. Since the font in your header is of static size, I don't see a problem with using an iFrame. Although I'm not sure if it's really intensive enough to be worth it.
Well, the browser appears to cache all seven banner images upon the first load, and runs them out from the cache (for each subsequent page) thereafter. I don't think you have a problem :D
Try it out with Firebug's Net monitoring tool in Firefox.
This may work without CSS also, but if you use CSS to load the background and your server is configured correctly, the image should already only be downloaded once.
Usually the browser will request a resource by asking for it only if it has not been modified since the last time it was downloaded. In this case, the only things sent back and forth are the HTTP headers, no content.
If you want to ensure the image is only downloaded once, add an .htacces or an apache2.conf rule to make the image expire a few days into the future so that users will only request it again if their cache is cleared or the content expiration date passes. An .htaccess file is probably too excessive to use in your case, though results may vary.
You could have it load the main page once, then asynchronously load the other elements when needed (ajax). If you did that, an iFrame would not be necessary. Here is an example of loading only the new material.
While using IFrames as a sort of master page/template for your pages might be a good thing, IFrames have a known negative impact to searchability/SEO.
It might also be unnecessary in the first place because once your images are loaded the first time (and with the large high-def images you have on your site, that would be slow no matter what you do) the images are cached by browsers and will not be reloaded until the user clears their cache or does a Ctrl+F5.