Firefox confusing different background images and ignoring cache-control
Categories
(Core :: Networking: Cache, defect, P2)
Tracking
()
People
(Reporter: bugzilla, Unassigned)
Details
(Whiteboard: [necko-triaged] [necko-priority-new])
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:141.0) Gecko/20100101 Firefox/141.0
Steps to reproduce:
I found this bug on a production website and managed to recreate it on a very basic local website on my laptop. The issue is with css background-image (s) that use the same relative URLs being seen as the same image, despite the relative URLs being on pages in different folders. An additional bug is that caching rules are ignored for these files and they are always served from cache even with caching disabled on the server, or caching disabled in the F12 browser tools.
Create a website and in the root add folder "product1". Inside that folder add index.html and another folder named "images". In "images" add an image file (I used logo.png haven't tested with jpg).
In the root add another folder "product2". Inside "product2" add index.html and an "images" folder and in the "images" folder a different image named "logo.png".
The html for both index.html files should be standard minimal HTML and the body is:
<body>
<style>
.logo {
display: inline-block;
width: 100%;
height: 38px;
background-image: url(images/logo.png);
background-repeat: no-repeat;
background-position: 47px;
}
</style>
<span class="logo"> </span>
</body>
User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:141.0) Gecko/20100101 Firefox/141.0
Actual results:
Whichever of the two index.html files you visit first, the logo.png will be cached and then displayed on the other index.html page. You will see the same image on both pages despite the image files being different. You will not be able to disable the caching of these images, even with the F12 developer tools Network Disable Cache checkbox.
This is a very specific issue that goes away when changing some of the CSS above. Remove "display: inline-block" and the problem goes away. Remove "background-position: 47px;" and the problem goes away.
Or obviously you could stop the relative URLs from being identical:
background-image: url(../product1/images/logo.png);
background-image: url(images/logo.png?prod=1);
That is the workaround I'm currently using but it would be nice if this didn't happen as my CMS will probably reproduce this issue in future.
Expected results:
The two pages should show different images - the png file local to them.
This bug does not affect Chrome/Edge/Safari
|
||
Updated•5 months ago
|
|
||
Comment 1•5 months ago
|
||
Emilio, dholbert - any idea why css would change this? It seems very odd to me that two resources with different URLs would map somehow to the same cache entry, or that we'd ignore no-cache.
|
|
||
Updated•5 months ago
|
|
||
Comment 2•5 months ago
|
||
This was a bug that should already be fixed, caused by bug 1956486 (where we started caching inline stylesheets across documents), and fixed by bug 1978217. Let me know if 142 and esr140 are not fixed.
This has been fixed by updating to version 142. Thanks a lot for the quick response.
Description
•