Почему спрайт работает не полностью?

Question

[axeax]

Ситуация такая: есть сайт, есть спрайт с кнопками и иконками, есть CSS который работает со спрайтом.
У кнопок есть 2 состояния: мышь есть, мыши нет.
Так вот, почему-то в 50% случаев обычное состояние (нет мыши) кнопки не отображается, как будто спрайта нет. Казалось бы, что это может быть из за того что спрайт не успевает прогрузиться к моменту рендеринга страницы, но нет. После обновления кнопка так и не появляется, хотя при наведении работает. Причем состояние наведения в спрайте находится ниже (изображения же грузятся сверху вниз...).
Еще момент. Если в chrome dev tools дебажить css код, и сдвинуть позицию спрайта на пиксель вперед-назад, то она появляется. Опять таки, после обновления страницы исчезает.
После чистки кэша как повезет, то работает то нет.
Вот кусок CSS

.message .button{
width:240px;
padding:9px 15px 0;
height:30px;
font-size:18px;
background:url(sprites/buttons-sprite.png) -9px -9px no-repeat;
display:block;
cursor:pointer;
text-decoration:none;
margin:15px 0 auto
}
.message .button:hover{
background:url(sprites/buttons-sprite.png) -9px -47px no-repeat
}

Comments

[Maksim Zverev]

Если бы вы еще и спрайт приложили бы, можно было бы попытаться воспроизвести это у себя.

[axeax]

Забыл сказать, может это важно: при загрузке страницы у блока .message display: none, и этот блок появляется только при некоторых событиях

[axeax]

habrastorage.org/files/94d/edb/6c1/94dedb6c1d0c4ce...
вот спрайт

[axeax]

вот видео бага, прошу прощения за качество, делал спешно
www.youtube.com/watch?v=UsuM4FlLoeo&feature=youtu.be

Answer 1

[ultrbi4]

Вы сами ответили на свой вопрос в видео, исправьте на значение, которое Вы меняете в devtools.

Comments

[axeax]

Там разница 1 пиксель, и при возвращении в исходное состояние всё ок

[ultrbi4]

тогда может проблема именно в display none у блока message ? Ведь button дочерний элемент для него.

[axeax]

:hover же работает
пробовал в css ставить для .message display:block, и после загрузки страницы его убирать. То же самое

[ultrbi4]

js задействован с этим элементом как то?

[axeax]

при возникновении события делает .message display:block, и в зависимости от типа события меняет текст мессаджа и кнопок

[ultrbi4]

Тогда я смогу Вам помочь только посмотрев в живую.

Answer 2

[Виталий Киренков]

Я бы сделал так:
Во-первых на ховере я бы сделал просто изменение позиции фона, то есть

.message .button:hover{
background-position:  -9px -47px;
}

Вы и так уже указали картинку, второй раз делать это нет смысла.

Чтобы понять, что трабла именно с картинкой, а не с видимостью блока, то замените картинку цветами. То есть изначально допустим просто красный фон, а по ховеру зелёный. Если всё хорошо - то отлавливать дальше.

Comments

[axeax]

Проблема не с видимостью блока тк текст в нём видно при любом состоянии, остальное попробую как дома буду

[Виталий Киренков]

Текст - не показатель. Возможно, если вы пропишете overflow: hidden, то вы и текста не увидете, так как может оказаться, что высота у блока 0px...

[axeax]

Высота тоже явно указана

[Виталий Киренков]

Не может оно просто так не работать!)) Скиньте вёрстку на почту, она в профиле, буду дома, гляну, подскажу =)))

[axeax]

Буду дома, отправлю)

[axeax]

Нет, понимаете, это же не всегда!)например намеренно у меня это поймать не особо получалось. Как то внезапно всегда вылезает) у меня все таки подозрение на скорость загрузки и тд, есть мысли в эту сторону? Еще я пробовал css подключать не в голове а внизу тела, но тщетно

[ultrbi4]

Дайте ссылку на проект и все вопросы отпадут )

[axeax]

@ultrbi4 vk.com/app3833431

[ultrbi4]

у меня нормально работает ховер

[axeax]

"После обновления кнопка так и не появляется, хотя при наведении работает. "
так и должно быть) ловить надо неработающее обычное состояние кнопки @ultrbi4