мерцание изображения при наведении мыши, даже когда спрайты используются для наведения изображения

Question

У меня есть веб-сайт: parisforaweekend.com с изображением кнопки «подписаться», которое меняет цвет при наведении курсора. Оба изображения являются частью одного изображения спрайта.

Все еще в Chrome (v. 15) Я становлюсь очень заметным, но нерегулярным, мерцающим при наведении мыши. Как на земле это возможно? Также протестировано на IE8 и FF6, которые, похоже, не имеют проблемы. Это меня сильно раздражает.

Полагаю, общий вопрос: кто-нибудь видел что-то подобное раньше? Что-нибудь, что может объяснить это странное поведение?

Хотя я не вижу возможности его использования, я включил соответствующий фрагмент css:

CSS

РЕДАКТИРОВАТЬ: изменен порядок правил CSS, чтобы отразить реальную ситуацию (хотя я не вижу, чтобы это изменило ситуацию)

#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">

РЕДАКТИРОВАТЬ: возможно, это связано с тем, что я использую облачный фронт S3 + (CDN Amazon). Не правильно кешировать (на Edge-location или на клиенте) и делать 2 запроса или что-то в этом роде. Хм, все еще довольно маловероятно.

Answer 1

Вы пытались использовать background-position вместо background?Я также не вижу проблемы, о которой вы упомянули, но это может быть связано с переопределением фонового изображения при наведении курсора.

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;}

Выше приведен пример кода, который решает проблему мерцания изображения при использовании спрайта изображения.

НЕ ЗАПИСЫВАЙТЕ URL ИЗОБРАЖЕНИЯ снова и снова, даже если он совпадает с первым.В противном случае он будет выдавать Chrome ложный сигнал для загрузки одного и того же изображения снова и снова.

Эта проблема снова возникает в Chrome 18.Другие браузеры, такие как IE 9 и Firefox, в порядке.

Answer 3

Когда страница загружается, первое фоновое изображение загружается автоматически.Затем, когда вы наводите курсор мыши на него, получает второе изображение, вызывающее небольшую задержку.Упомянутая вами неправильность основана на кешировании.Если изображение кэшируется, то вы не получите мерцания.

Для разрешения поместите изображения рядом в то же самое .jpg .Затем используйте background-position, чтобы установить желаемое изображение.

Изображение больше не нужно будет извлекать, и это предотвратит ваше мерцание.

Answer 4

Я просто столкнулся с той же проблемой. Но в моем случае это было вызвано каким-то другим правилом. Установка перехода CSS3 в 0 сделала свое дело:

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

Answer 5

Я нашел этот вопрос от Google на ту же проблему на моем сайте.Учитывая время (это было задано вчера), я бы предположил, что это новая ошибка, которую последняя версия Chrome представила в механизме кэширования.

Как упоминалось в других ответах, удаление фонового изображения из других изображений должнорешить проблему.Я использую Smart Sprites для генерации спрайтов, поэтому я не могу легко удалить его (он вставляется автоматически), но я думаю, что для этого мне придется написать сценарий после сборки, другого не вижурешение.

Answer 6

Я не знаю, почему мерцание возникает в Chrome, но вы не должны устанавливать URL фонового изображения для псевдокласса hover, а только менять положение фона.Пожалуйста, попробуйте это

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