Browser downloading a background image that's already loaded on the page?

Question

I'm using a <button> element with a background graphic. I've applied the CSS psuedo class :hover to it to swap out the background with a different one. I'm preloading the background graphic elsewhere on the page.

Take a look at this JSFiddle for a stripped down demo: http://jsfiddle.net/WawV3/2/

In Mac Chrome (32.0.1700.77) and Safari (7.0.1), the first time you hover over the button, the background flashes as it (presumably) downloads the new graphic... even though that very same hover image is loaded further down the page. (It will only do this on the first hover; subsequent hovers load instantly. Reload the page to see it happen again.)

What gives? The browser shouldn't have to download the background image as it's already on the page in plain view... right?

Worth mentioning, this doesn't seem to be an issue in Firefox on both the Mac and Windows or in IE.

Answer 1

You can encode the background images to avoid this issue if using a sprite is not possible. See Fiddle...

http://jsfiddle.net/WawV3/5/

button {
    height: 44px;
    width: 106px;
    background-image: url([data:image/png;base64,...]);
    background-repeat: no-repeat;
    border: none;
    outline: none;
}
button:hover {
    background-image: url([data:image/png;base64,...]);
    background-repeat: no-repeat;
}