Closed Bug 504448 Opened 15 years ago Closed 15 years ago

Firefox 3.5 re-downloads an image already in cache - breaks image preloading

Categories

(Core :: Graphics: ImageLib, defect)

Product:
Core
Component:
Graphics: ImageLib
Platform:
All
Windows 7
Type:
defect
Priority:
Not set
Severity:
major

Tracking

()

Status:
RESOLVED DUPLICATE of bug 497665

People

(Reporter: mozilla, Unassigned)

Details

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.1; en-GB; rv:1.9.1) Gecko/20090624 Firefox/3.5
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-GB; rv:1.9.1) Gecko/20090624 Firefox/3.5

Ok i just finished writing a site and was prompted with a very annoying and pretty stupid problem. Basically i have an image button. I also preload the hover image so that there isn't a lag in hovering the button. Initially i used the same simple method I've always used - the image was set as background on a div that was 0 wide and 0 high. However this didn't seem to work for some reason. Opening up firebug i noticed that upon the page loading the hover image was downloaded without a hitch. However as soon as i hovered my mouse over the button ff issued a get request for the hover image (even though it was already cached). Plus it seems to take a lot longer to download it the second time (431ms for the initial preload and 1.47s for the second time when i hover).
This is stupid (and annoying). I've tried using a js preloader and i get the same problem. Neither IE8, Safari nor Chrome have this problem.

Reproducible: Always

Steps to Reproduce:
1. Create a site with a button div
2. Create a css style for this div and give it an image
3. Create a :hover element for this div and give it your rollover image
4. Create an empty div on the site and call it something like 'preload'
5. Apply a css style for this preload div and set it to the rollover image with div width 0 and height 0
6. Open the page and hover mouse over button.
Actual Results:  
1. Button loads fine, and the preload does too - check firebug
2. Hovering over the button it will disappear while the rollover loads (should NOT happen since it's already cached). Firebug will show a new get request for the rollover image.

Expected Results:  
The image was already downloaded and is cached. Firefox should not re-download it. The first question one of you will ask is 'is caching disabled on the server?'. Well since neither safari, chrome or IE seem to have any problems then unless they are ALL ignoring server cache settings the answer is no. Also soft refreshing the page in ff 3.5 does not re-download the images (so hence caching works here).
Version: unspecified → 3.5 Branch
Can you give us a URI or a test case?
Testcase (also available on http://gcmnet.co.uk/testcase.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

#preload {
	background:url(http://kritterkorner.files.wordpress.com/2009/04/baby-doll-sheep.jpg) no-repeat;
	width:0;
	height:0;
}

#button {
	background:url(http://www.hedweb.com/sheep.jpg) no-repeat;
	width:394px;
	height:578px;
}

#button:hover {
	background:url(http://kritterkorner.files.wordpress.com/2009/04/baby-doll-sheep.jpg) no-repeat;
	width:480px;
	height:441px;
}

</style>
</head>

<body>
<div id="button"></div>

<div id="preload"></div>
</body>
</html>
Hmm I saw this the first time, but now can't reproduce it even with a clean cache.  Could you copy the headers out of firebug?
Status: UNCONFIRMED → NEW
Ever confirmed: true
[GET testcase.html]
==REQUEST
Host: gcmnet.co.uk
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-GB; rv:1.9.1) Gecko/20090624 Firefox/3.5
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-gb,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
==RESPONSE
Date: Thu, 16 Jul 2009 01:02:45 GMT
Server: Apache/2
Last-Modified: Thu, 16 Jul 2009 00:40:11 GMT
Etag: "e08071-303-ea0b50c0"
Accept-Ranges: bytes
Content-Length: 771
Keep-Alive: timeout=15, max=95
Connection: Keep-Alive
Content-Type: text/html

[GET sheep.jpg]
==REQUEST
Host: www.hedweb.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-GB; rv:1.9.1) Gecko/20090624 Firefox/3.5
Accept: image/png,image/*;q=0.8,*/*;q=0.5
Accept-Language: en-gb,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Referer: http://gcmnet.co.uk/testcase.html
Pragma: no-cache
Cache-Control: no-cache
==RESPONSE
Date: Thu, 16 Jul 2009 01:02:45 GMT
Server: Apache/2.2.9 (Debian) DAV/2 mod_fastcgi/2.4.6 PHP/5.2.6-1+lenny3 with Suhosin-Patch mod_ssl/2.2.9 OpenSSL/0.9.8g
Last-Modified: Tue, 28 Apr 1998 15:20:34 GMT
Etag: "1a4827f-131ff-32ce2a2b2f480"
Accept-Ranges: bytes
Content-Length: 78335
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Content-Type: image/jpeg

[GET baby-doll-sheep.jpg]
==REQUEST
Host: kritterkorner.files.wordpress.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-GB; rv:1.9.1) Gecko/20090624 Firefox/3.5
Accept: image/png,image/*;q=0.8,*/*;q=0.5
Accept-Language: en-gb,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Referer: http://gcmnet.co.uk/testcase.html
Cookie: __qca=4a3d6da8-b4064-1e6c1-9ec9b
Pragma: no-cache
Cache-Control: no-cache
==RESPONSE
Server: nginx
Date: Thu, 16 Jul 2009 01:02:45 GMT
Content-Type: image/jpeg
Connection: close
Vary: Host
Last-Modified: Thu, 02 Apr 2009 13:42:06 GMT
Expires: Sat, 18 Jul 2009 10:38:44 GMT
X-hawt: very
Content-Length: 153548
X-VI: ORD 177
X-Varnish: 914407978 914020637
Age: 5431
Via: 1.1 varnish

[GET baby-doll-sheep.jpg]
==REQUEST
Host: kritterkorner.files.wordpress.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-GB; rv:1.9.1) Gecko/20090624 Firefox/3.5
Accept: image/png,image/*;q=0.8,*/*;q=0.5
Accept-Language: en-gb,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Referer: http://gcmnet.co.uk/testcase.html
Cookie: __qca=4a3d6da8-b4064-1e6c1-9ec9b
Pragma: no-cache
Cache-Control: no-cache
==RESPONSE
Server: nginx
Date: Thu, 16 Jul 2009 01:02:50 GMT
Content-Type: image/jpeg
Connection: close
Vary: Host
Last-Modified: Thu, 02 Apr 2009 13:42:06 GMT
Expires: Sat, 18 Jul 2009 10:38:44 GMT
X-hawt: very
Content-Length: 153548
X-VI: ORD 177
X-Varnish: 914408393 914020637
Age: 5436
Via: 1.1 varnish
I'm not an HTTP expert, but I don't see anything obviously wrong.  Moving to networking.
Component: General → Networking: Cache
Product: Firefox → Core
QA Contact: general → networking.cache
Hardware: x86_64 → All
Version: 3.5 Branch → unspecified
Unable to see problem(excess HTTP GET) using LiveHTTPHeaders with Fx 3.5 on MS Win-XP SP3(LiveHTTPHeaders, SQLite Manager is installed), with your test page.
> Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1) Gecko/20090624 Firefox/3.5
In addition to above, HTTP GET with If-Modified-Since: was seen for two jpeg files when Reload.

(In reply to comment #0)
> Opening up firebug ... (snip)
> Firebug will show a new get request for the rollover image.

Can you reproduce your problem with new profile?
Get HTTP log with new profile.
> http://www.mozilla.org/projects/netlib/http/http-debugging.html
See Bug 402793 Comment #17 for adding timestamp to log for ease of log analysis.
I can confirm the bug status on MacOSX 10.6

I've uploaded the http log to: http://gcmnet.co.uk/moz/log.txt

I've also screencasted the bug:

http://www.screenjelly.com/watch/yrTFKIpSNAw

(Note that the refresh was a shift-refresh)
Does this work with FF3.0.11 ?
It could be a regression from the new image cache.
Can't check it atm. I have a desktop back in uni who's FF i haven't updated in a while so i can check there. I'll do that tomorrow and should post back a reply in the evening GMT0 time.
I can confirm that this bug is NOT present in FF 3.0.10 but is still present in 3.5.1
Component: Networking: Cache → ImageLib
QA Contact: networking.cache → imagelib
Shift-reloads always reload images twice due to bug 497665; does this problem occur without shift-reload?
A standard reload does not seem to cause this bug - you seem to be correct. I thought a standard refresh would still show images in cache? (That's why you shift-reloaded). I first noticed this bug when i loaded the page for the first time (nothing was cached). But now even clearing the cache manually it seems to work fine. There's a bug in there somewhere though either way. It's an annoyingly hard one to catch though :D
Right. We erroneously download images fresh from the server every time they're referenced when you shift-reload, but not on regular reload.
Status: NEW → RESOLVED
Closed: 15 years ago
Resolution: --- → DUPLICATE
Right. Ok so your working on it then. Cool. Thanks for the help :) Any release target for a fix?
http://www.devirtuoso.com/Examples/CSS-Preloader/
Shift-refresh, and the hover image is redownloaded.
Confirmed by using Wireshark, on WinXP SP2, FF 3.5.2
You need to log in before you can comment on or make changes to this bug.