Блог

У меня есть веб-сайт: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 cloudfront (CDN от Amazon). Неправильно кэшируется (в пограничном местоположении или на клиенте) и выполняет 2 запроса или что-то в этом роде. Хм, все еще маловероятно.

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

 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, в порядке.

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

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

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

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

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

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

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

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

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