Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Спрайт прыгает при ховере в ff12 mac os X


Автор: vov4eg 7.6.2012, 10:15
Добрый день.

Помогите решить проблему с некорректным отображением спрайта при ховере!!!

Есть сайт, в хидере сайта размещены 4 ссылки на социальные сети. Каждой ссылке бекграундом выводиться черно-белая иконка социальной сети, размером 24х24 пикс. При ховере иконка подменяется цветной.

Чтобы улучшить работу сайта я сделал из 8 иконок(4 черно-белые и 4 цветные) один спрайт.

Проверил работу на 3 ОС(Windows XP x64, Ubuntu 10.64, Mac OS X) и во всех популярных браузерах все отображается корректно.

Проблема заключается в следующем: 

У заказчика mac на котором установлена mac os X, во всех браузерах кроме firefox 12, все работает нормально.

Но в firefox 12 при ховере на первую ссылку иконка смещается на один лишний пиксель влево.

Кто то сталкивался с подобной проблемой?

Ссылку на сайт дать не могу из-за договора с заказчиком.

Автор: ksnk 7.6.2012, 12:11
Перефразируя проблему, получим
"У меня все работает кроме как на компе заказчика с Mac OS X и FF12. Кода я вам не дам ;)." 

Самому хоть где-нибудь, воспроизвести проблему получилось?

То, что FF обновляется автоматически и сейчас уже версия 13 - не поможет?

Автор: vov4eg 7.6.2012, 12:28
код могу дать(извиняюсь что чразу так не сделал smile ):

Код

<div class="social">
<a class="linkedin" href="#" target="_blank"></a>
<a class="facebook" href="#" target="_blank"></a>
<a class="twitter" target="_blank" href="#"></a>
<a class="vimeo" href="#" target="_blank"></a>
</div>

Код

.social {
    float: right;
    height: 24px;
    margin: 0 3px 0 0;
}
.linkedin, .facebook, .twitter, .vimeo {
    float: left;
    height: 24px;
    margin: 0 4px 0 0;
    width: 24px;
}
.linkedin{background: url(../images/social-icons.png) no-repeat;}
.linkedin:hover{background: url(../images/social-icons.png) no-repeat -24px 0;}
.facebook{background: url(../images/social-icons.png) no-repeat -48px 0;}
.facebook:hover{background: url(../images/social-icons.png) no-repeat -72px 0;}
.twitter{background: url(../images/social-icons.png) no-repeat -96px 0 ;}
.twitter:hover{background: url(../images/social-icons.png) no-repeat -120px 0;}
.vimeo{background: url(../images/social-icons.png) no-repeat -144px 0; margin: 0;}
.vimeo:hover{background: url(../images/social-icons.png) no-repeat -168px 0;}


Самому хоть где-нибудь, воспроизвести проблему получилось?


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

То, что FF обновляется автоматически и сейчас уже версия 13 - не поможет?

Уже думал об этом но заказчик все равно потребует либо линк на описание бага в иностранных авторитетных источниках, либо исправление бага.

Автор: ksnk 7.6.2012, 15:19
Цитата(vov4eg @  7.6.2012,  12:28 Найти цитируемый пост)
Проблему воспроизвести не удалось, что еще более усложняет поиск решения.

То есть стенд с MacOsX и FF12 есть, но проявлений ошибки не видно? Только в специфических условиях единственного компьютера заказчика? 

Может у него какие-нибудь хитрые плагины установлены?

Автор: vov4eg 7.6.2012, 15:25
В общем накопал я проблему, при масштабе в 110% только на mac OS X, в ФФ 11 и 12 проявляется что то похожее на слова заказчика.

Правда у него двигалась первая иконка у меня третья.

Как это исправить у меня вариантов нет.

Думаю над тем чтобы вернуть эти злополучные картинки по отдельности, но уже предвкушаю новый запрос от заказчика о том что ссылки "мигают" при наведении. smile  smile  smile 

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)