CODEWITHSUNDEEP
cssgoogle-chrome
Geert-Jan
Geert-Jan

Reputation: 18915

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

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.

Upvotes: 4

Views: 10033

Answers (6)

TimB
TimB

Reputation: 1

I just ran into the same issue. 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;

Upvotes: 0

vivianalive
vivianalive

Reputation: 41

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.

Upvotes: 4

ripper234
ripper234

Reputation: 230206

I found this question by Googling for the same problem on my site. Given the timing (this was asked yesterday), I would assume that this a new bug that a recent Chrome version introduced in the caching mechanism.

As mentioned in other answers, removing the background-image from other images should resolve the issue. I'm using Smart Sprites to generate the sprites, so I can't easily remove it (it gets inserted automatically), but I think I'll have to write a post-build script to do it, I don't see another solution.

Upvotes: 0

Chris
Chris

Reputation: 3201

When the page loads the first background image is loaded automatically. When you then mouse over it has to then retrieve the second image causing a slight delay. The irregularity you mention is then based on caching. If the image is cached then you wont get a flicker.

To resolve have the images side by side in the same .jpg. Then use the background-position to set the image you want.

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

Upvotes: 1

ExpExc
ExpExc

Reputation: 3926

I don't know why the flicker occurs on Chrome but you should not set background image url for hover pseudo class, only change the background position. Please try this

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

Upvotes: 0

Alan
Alan

Reputation: 2087

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.

Upvotes: 14

Related Questions