webvany
@webvany
Дизайнер

Из-за чего происходит дрожание кнопок при transition сглаживании hover-а?

Ссылка
Делаю кнопки, ситуация такая:
Эти четыре кнопки дрожат при наведении, что раздражает многих людей. Но дрожат они только, когда браузер на полный экран, если попробовать активировать их в браузере, не на полный экран всё проходит идеально плавно. Кто подскажет в чём может быть проблема?
Может проблема в том, что margin-left в процентах, к тому же через calc()
  • Вопрос задан
  • 4431 просмотр
Решения вопроса 1
Slasher
@Slasher
Просто сделайте это через box-shadow, будет лучше.
Измененный код: http://i.imgur.com/beZleKR.png
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
GeneMoss
@GeneMoss
void
Вот так у меня не дрожит:
(стили с :hover для .icon-time, .icon-phone, .icon-email, .icon-sendmail — вообще удалить)
.order-icon {
  display: block;
  width: 128px;
  height: 128px;
  border: 0;
  margin-left: 0;
  border-radius: 50%;
  background-position: center center;
}
.order-icon:hover {
  transition: border-width .3s, width .3s, height .3s, margin .3s;
  width: 148px;
  height: 148px;
  margin: -10px 0 0 -10px;
  border: 10px solid #3498db;
  background-color: #3498db;
}
.icon-time     {background-image: url(http://i.imgur.com/KQMon1l.png); left: 0%; }
.icon-phone    {background-image: url(http://i.imgur.com/PgL1Dg8.png); left: 30%;}
.icon-email    {background-image: url(http://i.imgur.com/vSe1ucN.png); left: 58%;}
.icon-sendmail {background-image: url(http://i.imgur.com/DVnQPb9.png); left: 86%;}
Ответ написан
там где background задаёте надо так
background: url(http://i.imgur.com/KQMon1l.png) center center

а у transition оставить только border-width и тогда всё ок))
Ответ написан
хотя если у transition оставить только border-width тогда border сходится только снаружи(( я так понимаю изнутри расти должен?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы