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. ✌️
Related
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%
This is a really weird bug that has already consumed half of my day.
I am creating a chrome extension and when developing the extension locally it looks fine (like I want it to look).
However, once I load the extension to chrome to test performance the UI looks a lot smaller.
I made sure both windows are at 100% size.
What is weird is that actual values change. Font that should be 16px in development becomes 12px in "production".
I have attached 2 screenshots:
DEVELOPMENT (How it is meant to look):
PRODUCTION (How Chrome renders it, once the extension is uploaded):
There you can clearly see the changes in font size and UI. Is this a known Chrome bug or something?
Any help or hint is appreciated since I feel kind of stuck!
Thanks!
maybe the answer of this thread could help you:
LINK
Seeing the images you attached, I can only assume that an ancestor tag (it could be the button or an even more ancestor element) uses a font size that conflicts with your "font-light" class declared 16px.
If by "testing locally" you mean opening the html page with chrome outside of a loaded unpackaged extension, then accept my advice to review your method.
The same html + css combo loaded in Firefox (almost certainly) would give an even different result.
It is also possible that the issue\solution lies somewhere else, but the concepts just outlined need to be taken into consideration.
I have been working for hours to figure out why my CSS is not being applied for printing an HTML page. I have created a working example of the markup I am rendering with dompdf:
https://jsfiddle.net/n7Lak0gr/1/
The HTML and CSS is a directory with multiple columns in a table. The rows have an alternating background color, and there are some other styles as well. But upon printing to a PDF, the styles do not show, even if I have media set to all.
Note that if you copy all of the code from this version and create your own local html file, you can see it better, since another issue is that the table overflows into multiple pages when the styles are not applied.
I have reproduced the issue in Chrome, Firefox, and Internet Explorer. And I have tried removing pieces of the CSS, but I cannot figure out why the styles don't show.
It is the default setting of most browsers not to print backgrounds. Obviously this is to save ink/toner.
You can change that setting in the browser preferences, but the bad thing is that you can't influence those via your website - it's purely a decision of the user who does the printing (and most users don't even know about this preference setting)
I figured it out. I had to delete the font cache file dompdf_font_family_cache.php located in sites/all/libraries/dompdf/lib/fonts/.
I was pointed in the right direction after seeing some other errors and viewing this SO answer
Strange bug I fixed once in the past but did not write it down/document it/report it so now I'm lost in the same workframe.
So, it's an Angular 2 app, the content is hardcoded html, no Angular binded variables, data banding or similar.
The bug show up on Chrome, not on Firefox.
If I refresh 10 times in a row, the content will show up sometimes and won't others, there is no pattern or clues about it.
Once the content is hidden, if i change whatever element property, will show up all the content instantly.
I have attached a gif which explains the bug clearly.
Thanks for any idea/suggestion/help :)
EDIT 1:
I just added 2 pictures of the css computed, one with Bootstrap 4 and other without the framework, same result.
Not related at all to Angular or any stuff like that.
I am importing a font from the GoogleFonts page. If I download this font, I get TTF format, which is having a bug on Chrome and does not work properly, but if I link to their server, it's using WOFF2 format.
See this picture attached which it shows the different formats for the same font.
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...