Closed Bug 1660200 Opened 4 years ago Closed 4 years ago

Browser Cache: CSS-files are still in cache after page-refresh or clear cache

Categories

(Core :: CSS Parsing and Computation, defect)

79 Branch
defect

Tracking

()

RESOLVED DUPLICATE of bug 1664405

People

(Reporter: Reiner.Makohl, Unassigned)

Details

Attachments

(2 files)

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:79.0) Gecko/20100101 Firefox/79.0

Steps to reproduce:

Firefox 79.0 (Win 10)

  1. call of an existing html page in the browser (in development)
  2. modification and publishing of an associated CSS file
  3. First try: In the browser: Button "Refresh"
  4. Second try: In the browser: Function "Clear Cash" (german: "Neueste Chronik löschen -> Cache")

Actual results:

Steps 3 and 4 remain without effect.
The html page is displayed unchanged.
The changes in the correctly published CSS file are not considered.

Expected results:

Step 3 should already have shown the changed result (like in Firefox 78, Google Chrome, Microsoft Edge ...)
Step 4 should have definitely forced the CSS file to be reloaded.

Currently (in Versin 79.0) I have to change the html page to force the loading of the changed CSS file.

Component: Untriaged → Networking: Cache
Product: Firefox → Core

Hi Reporter,

Could you try to use mozregression to help us find the regression range?

Thanks.

Flags: needinfo?(Reiner.Makohl)

I have tried the actual installation of mozregression-gui.exe
Are you sure that this file is okay? (I have no experience with it).

Windows 10 gives a warning, Norton finds a virus called "Heur.AdvML.B" (high security risk) and isolates the file . Therefore it cannot be started on my computer.
If this is not a virus, but an essential part of the app, I can try to run the GUI app without Norton monitoring.

One more hint about the error:
In fact the error cannot be reproduced with small test files. I use several CSS files per page with a total of several hundred entries. In the browser, the same URL (in different states) is also open in several tabs.

Flags: needinfo?(Reiner.Makohl)

This sounds like it's caused by the CSS cache, not the network cache.

Component: Networking: Cache → CSS Parsing and Computation

Some questions:

  • What server are you using for development?
  • Which headers does the CSS files get served with?
  • Does Ctrl+F5 fix this without making you touch the file?
Flags: needinfo?(Reiner.Makohl)

Server: Apache (local xampp istallation)
CSS-Header: @charset "utf-8"; (Webpage php/html5)

And now the surprise:

I pressed CTRL+F5.
Since then the click on the button "Refresh Page" works fine. The modified and published CSS file is loaded in the current tests (without pressing CTRL+F5 again), the output is as desired.

Flags: needinfo?(Reiner.Makohl)
Attached image headers.png

I meant the CSS headers as in in the devtools network panel. See the screenshot there.

Flags: needinfo?(Reiner.Makohl)

(In reply to Reiner Makohl from comment #5)

I pressed CTRL+F5.
Since then the click on the button "Refresh Page" works fine. The modified and published CSS file is loaded in the current tests (without pressing CTRL+F5 again), the output is as desired.

That is really really odd.

Attached image rml-css-headers.png -

Excuse me! I am not really familiar with the developer tools. I hope this is the right info now.

Flags: needinfo?(Reiner.Makohl)

No, no worries at all, thank you! Hmm, there's nothing there that could possibly trigger what you were seeing, which makes it even more fascinating... o.O

In particular, when we get the request cache parameters here we should end up with no expiration time, which ends up here and should mark the resource as insta-expired, so that we reload it next time we request it.

There was something clearly off about what you were seeing... It seems you can no longer reproduce it? If so I guess this is not really actionable (and we can just close this), but I really wonder what's up with what you were seeing to begin with :/

This is really strange!
I have been annoyed by this problem several times a day since the automatic update to 79.0.

Could the problem possibly have been triggered during the update from 78.xx to 79.0?
I always have a lot of tabs open (with automatic reopening when the browser starts).

Currently it works, and I hope it will still work tomorrow.

Thank you!

Hi Reporter: Can you share in the next day or so if things are still working for you?

Flags: needinfo?(Reiner.Makohl)

Please excuse the late reply!
The update to 80.0 came in the way.
So I did the tests again, now with Firefox 80.0.

It does not work as I would like it to!

So that you can see for yourself what happens, I have created a video recording of the test.

You can find the video here:

https://www.stilkunst.de/videotemp/css-test.mp4

I don't think it works as it should, do you?

Flags: needinfo?(Reiner.Makohl)

I agree it's not working as I'd expect, but I tried to reproduce it installing XAMPP on my Windows machine and I couldn't, the file is always reloaded in the network tab.

Is there any .htaccess or other configuration files that I would need to reproduce this issue? Otherwise figuring out what is causing it is going to be hard.

Flags: needinfo?(Reiner.Makohl)

Yes, I also strongly suspect that the problem may only affect some specific cases. Because with simple test files and only one css-file I also cannot reproduce it.

the .htaccess contains only some redirections for the production environment (for search engines), but they don't have any effect in the test environment, because I always call only valid URLs here. Furthermore the shown page would not be affected.
But I use numerous css-files at the same time, several web-fonts (woff/woff2) an a lot of pics in these pages.

What surprises me is that even deleting the cache manually does not work.
Is there a significant difference to "Clear Cache + Refresh" and "CTRL+F5" except for the positioning of the output in the window? Does CTRL+F5 use a kind of "super cleaner with the power formula" ? :-)

After all, with CTRL+F5 I have a solution I can live with. I just love to work with Firefox as my first test browser.

I can understand if the problem is put on hold or closed.

In fact my test so far only referred to the local xampp installation as server and to css classes in connection with ::firs-line / ::first-letter.

I will try to extend the tests, but I would need more time, because it is complex for me, too. I don't know if this makes sense for you.

Well so far first of all: thank you very much!

Flags: needinfo?(Reiner.Makohl)

Additional Info:
If this happens (after modifying the css file an reloading the page), neither the CSS files nor fonts are listed in the devtool network panel at all, as if they did not exist. Many files have the code 304.

If I click on the checkbox "Disable Cache" in the devtool network panel and reload the page, all dependent files appear in the list, now with code 200 throughout, including the modified CSS file. The output is then correct.

I wanted to note that I'm also experiencing this same issue -- here's is what I have been able to determine:

Firefox 81.0.1 (Linux [Ubuntu])

Steps to reproduce:

  1. Load webpage (this is not on localhost)
  2. Open Dev Tools -> Network -> toggle off then on (check) "Disable Cache" -> F5 (refresh) -- this works just fine
  3. Enter "Responsive Design Mode"
  4. Inspect any element (right-click -> "Inspect Element"; this causes the Dev Tools "tab" to change to "Inspector")
  5. Make any change to the CSS file(s)
  6. F5 (Refresh) -- this works just fine
  7. Make additional changes to the CSS file(s)
  8. Exit "Responsive Design Mode" (do NOT refresh first)
  9. F5 (Refresh) -- the CSS file(s) are cached and the CSS changes in step 7 are not reflected
  10. Select "Network" "tab" within Dev Tools, notice the "Disable Cache" is still checked, however, CSS (and other assets) are status 304

I started noticing this in Firefox 79, which lines up with https://bugzilla.mozilla.org/show_bug.cgi?id=1599160 noted in the release notes (https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/79)

The severity field is not set for this bug.
:jfkthame, could you have a look please?

For more information, please visit auto_nag documentation.

Flags: needinfo?(jfkthame)

Bug 1664405 fixes the underlying issue. Bug 1662987 fixed "clear cache" not working (you need to Ctrl+F5).

Status: UNCONFIRMED → RESOLVED
Closed: 4 years ago
Flags: needinfo?(jfkthame)
Resolution: --- → DUPLICATE

I noticed that this bug, and many related bugs, are now marked as "closed", however, I'm still seeing this issue in Firefox 82 (Linux [Fedora 33]).

Steps to reproduce:

  1. Load webpage (https://www.weather.gov/)
  2. Open Dev Tools -> Network -> toggle off then on (check) "Disable Cache" -> F5 (refresh) -- this works just fine
  3. Enter "Responsive Design Mode"
  4. Inspect any element (right-click -> "Inspect Element"; this causes the Dev Tools "tab" to change to "Inspector")
  5. F5 (Refresh) -- this works just fine
  6. Exit "Responsive Design Mode"
  7. F5 (Refresh)
  8. Select "Network" "tab" within Dev Tools, notice the "Disable Cache" is still checked, however, CSS (and other assets) are status 304

Is this a different issue than the thread here? Can I provide any other details to help with this issue?

Flags: needinfo?(emilio)

Yes, that seems like a totally different issue, though I can reproduce it.

It seems like entering and leaving Responsive Design Mode makes the cache checkbox not have any effect (until you toggle it off and on again). If you could file an issue here it'd be great, feel free to CC me and I can take a quick look, though I'm not particularly familiar with the DevTools codebase.

Flags: needinfo?(emilio)
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: