Почему прыгают иконки при обновлении?

Question

[igorstec]

сделал -> CSS спрайтами

.header-social__tw{
background: url(header-social-btns.png) 6px 7px no-repeat;}

a.header-social__tw:hover{
background: url('header-social-btns.png') 6px -39px no-repeat;}

<div class="header-social-btns">
<a href="#" class="header-social__link header-social__tw"></a>
</div>

в общем с горем пополам нашел решение... прописав
<script src="/js/modernizr.js"></script>
что самое интересное у меня не было вообще папки js но все равно заработало
думаю что хром не найдя этого файла отправляется на оф сайт и подгружает полный файл

Answer 1

[Юрий Лобанов]

upd: jsfiddle.net/dyf6pvod/2
Не пишите all, анимируйте только нужные свойства.

Давайте больше кода. Размеры блоков иконок как указаны?

Comments

[igorstec]

сейчас подготовлю

[Юрий Лобанов]

@igorstec изменил ответ, посмотрите.

[Юрий Лобанов]

@igorstec прыгает, кстати, только в chrome. А вообще причина скорее всего в том, что не успевает подгрузиться стиль, а из-за transition уже анимируется.

[igorstec]

в верху написал про решение... если интересно ) спасибо за помощь

[Юрий Лобанов]

@igorstec но мою рекомендацию все равно учтите. Потому что писать all надо очень редко, проблемы могут выскочить откуда не ждали.

[igorstec]

я понял спасибо

Answer 2

[Константин Довнар]

Случайно transition не задан в стилях для них?

Comments

[igorstec]

указан, ниже более подробное описание с моим кодом

Answer 3

[igorstec]

вот тут пример он правда там не прыгает но если вы хотите посмотреть как прыгает то заходите сюда

что я обнаружил...
1 - если убрать поиск то не пригает
2 - если убрать transition не прыгает даже с поиском, но мне нужен transition

Answer 4

[Владислав Чернушевич]

А вы transition для :hover попробуйте прописать

Comments

[igorstec]

не помогло