Reload with F5 does not reload CSS
Categories
(Core :: CSS Parsing and Computation, defect)
Tracking
()
People
(Reporter: costa, Unassigned)
References
Details
Attachments
(6 files)
Screenshot from 2020-09-15 16-21-56.png
User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:80.0) Gecko/20100101 Firefox/80.0
Steps to reproduce:
- Write very simple HTML page with linked CSS stylesheet.
- Use static server to serve up files (node http-server or python http.server).
- Edit the CSS.
- Press Alt + Tab then F5 to refresh the page.
Actual results:
The CSS is not reloaded, and no CSS edits carry over.
Expected results:
The CSS should reload and edits should carry over into the browser.
Notes:
- If I have the console open, F5 works just as expected.
- If I use a hard refresh Ctrl + Shift + R then it works as expected (but scrolls back to the top).
Ugh... I'm getting really inconsistent behavior. With python3 -m http.server 8080 I sometimes get the same problem (where it doesn't recognize the change in CSS, until the first time I hit Ctrl + F5. Then it acts normal until I restart the server again. For your code (https://gist.github.com/emilio/c89d2a7bb9fa96c02da96a6b69de549d) this isn't the case. My code is a basic html + css site. The code is in this repo: wamoyo.github.io/lightning-talk-recorder-demo/ It's nothing fancy. Just a webrtc demo.
With my http-server (forked from the npm http-server module, I edited some of the logging styles), I don't get CSS edits unless I ignore cache.
I searched through the code, and I don't seem to be setting a max-age anywhere. Certainly not by default.
I can screenshot my logs, but all they show is the server not requesting the CSS file.
Alright, I think I fixed this on my end : )
In case anybody finds this, it's Cache-Control rather than Max-Age that seemed to solve it.
@Emilio, thank you for your help, sir!
|
||
Comment 3•4 years ago
|
||
This page illustrates F5 being ignored for external style sheets when they are not expired in the cache:
https://www.jeffersonscher.com/csscache/index.html
Interestingly, I get the same result for this test case in Chrome 85.
|
||
Comment 4•4 years ago
|
||
(In reply to jscher2000 from comment #3)
Yes, that behavior is correct and expected.
(In reply to costa from comment #2)
In case anybody finds this, it's Cache-Control rather than Max-Age that seemed to solve it.
Can you let me know, just to double-check, which server headers were not working?
|
||
Updated•4 years ago
|
I think http-server was setting 3600 seconds max time for cache by default. Not sure what the python server was doing.
Let me check.... file:///home/costa/Pictures/Screenshot%20from%202020-09-15%2012-31-47.png
Not sure if that helps. That was the original setting. It's adding max-age 3600. I've switched that to zero now.
|
|
||
Comment 6•4 years ago
|
||
(In reply to costa from comment #5)
Let me check.... file:///home/costa/Pictures/Screenshot%20from%202020-09-15%2012-31-47.png
Can you attach it using the "Attach New File" button? Bugzilla comment boxes are text/markdown only :)
|
Reporter | |
Comment 10•4 years ago
|
||
|
|
Reporter | |
Comment 11•4 years ago
|
||
|
|
Reporter | |
Comment 12•4 years ago
|
||
|
|
||
Comment 13•4 years ago
|
||
Ah, yeah, if you have Cache-Control: max-age=3600 you're telling the browser that your resource will be valid for that amount of time, and there's no other cache-control header which would cause us to always revalidate.
Thanks for the screenshots!
|
|
||
Comment 14•4 years ago
|
||
I created an extension as another workaround -- it applies cache-control: no-store to text/css responses from hosts you specify:
- https://addons.mozilla.org/firefox/addon/no-cache-no-store-for-css/
- https://github.com/jscher2000/No-Cache-No-Store-Extension
(Still trying to figure out a good user interface for managing addition and removal of host permissions. Hopefully Firefox will have a native one at some point.)
|
|
Reporter | |
Comment 15•4 years ago
|
||
Thanks, gents! My mistake all along.
Description
•