image flickering on mouseover even when sprites are used for hover image

Question

I have a website: parisforaweekend.com with a 'subscribe' button-image that changes color on mouseover. Both images are part of the same image sprite.

Still in Chrome (v. 15) I'm getting very noticeable, but irregular occurring, flickering on mouse-over. How on earth is this possible? Also tested on IE8 and FF6 which don't appear to have the problem. It annoys me a lot.

I guess the general question is has anybody seen something like this before? Anything that can explain this weird behavior?

Although I can't see what possible use it is I included the relevant css-snippet:

CSS

EDIT: changed order of css rules to reflect real situation (although I can't see that making a difference)

#mc_embed_signup input.button {
display: inline-block;
width: 100px;
margin: -1px 0 10px 15px;
padding: 0;
border: 0 none;
cursor: pointer;
background: url('http://static.parisforaweekend.com/img/s.jpg') 0 0;
line-height: 32px;
}

#mc_embed_signup input.button:hover {
background: url('http://static.parisforaweekend.com/img/s.jpg') -101px 0;
}

HTML

<input type="submit" value="" name="subscribe" id="mc-embedded-subscribe" class="button">

EDIT: perhaps it has to do with the fact that I'm using S3 + cloudfront (Amazon's CDN). Not caching correctly (on Edge-location or on client) and doing 2 requests or something. Hmm, still pretty unlikely.

Answer 1

Have you tried using background-position instead of background? I'm not seeing the problem you mentioned either, but it may be something to do with essentially redefining the background image on hover.

Answer 2

a.btndownload{background-image:url(../images/btn-download-sprite.gif); background-position:left top; background-repeat:no-repeat; display:block;}
a.btndownload:link{background-position: left top;}
a.btndownload:visited{background-position: left top;}
a.btndownload:hover{background-position:  0px -34px;}
a.btndownload:active{background-position:  bottom left;}

Above is the sample code that solves the image flickering problem when using image sprite.

DO NOT OVERWRITE IMAGE URL again and again, even if it's same as the first one. OTHERWISE it'd give Chrome false signal to load the same image over and over.

This problem emerges on Chrome 18 again. Other browsers like IE 9 and Firefox are fine.