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.