Image flickers on hover, even when sprites are used to image hover

Question

I have a website: parisforaweekend.com with a subscription button that changes color on hover. Both images are part of the same image sprite.

In Chrome (v. 15), I get a very noticeable, but irregular character that flickers on hover. How is this possible? Also tested on IE8 and FF6, which seem to have no problem. It annoys me a lot.

I think the general question is: has anyone seen something like this before? Anything that can explain this strange behavior?

Although I can't figure out what the possible use is, I included the appropriate css snippet:

CSS

EDIT: Reordered the css rules to reflect the real situation (although I don't see it make any 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: This may be due to the fact that I'm using S3 + cloudfront (Amazon CDN). It’s not right to cache (on the Edge-location or on the client) and make 2 requests or something else. Hmm, still pretty unlikely.

Answer 1

Have you tried using a background position instead of a background? I don’t see the problem you were talking about, but this could be due to a significant redefinition of 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 an example code that solves the problem of flickering images when using image sprites.

DO NOT Rewrite the IMAGE URL again and again, even if it is similar to the first. Otherwise, it would give a chrome-false signal to reload the same image.

This issue occurs again in Chrome 18. Other browsers, such as IE 9 and Firefox, are fine.

Answer 3

When the page loads, the first background image is loaded automatically. When you then hover over it, then retrieve the second image, causing a slight delay. The failure you are talking about is then based on caching. If the image is cached, you will not get a flicker.

To resolve, images will be side by side in the same .jpg . Then use the background position to set the image you want.

The image no longer needs to be retrieved and this will prevent your flicker.

Answer 4

I don’t know why the flicker occurs in Chrome, but you should not specify the URL of the background image for the hover pseudo-class, but only change the background position. Please try this

 #mc_embed_signup input.button:hover { background-position: -101px 0; } 

Answer 5

I found this question on Google for the same problem on my site. Given the time (this was set yesterday), I would suggest that this is a new bug that appeared in the latest version of Chrome in the caching mechanism.

As mentioned in other answers, removing the background image from other images should solve the problem. I use Smart Sprites to generate sprites, so I can’t easily remove it (it is automatically inserted), but I think I need to write a post-build script to do this, I don’t see another solution.

Answer 6

I just ran into the same problem. But in my case, it was caused by some other rule. Setting the CSS3 transition to 0 did the trick:

 -webkit-transition: 0s; -moz-transition: 0s; -o-transition: 0s;