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

Question

[Иван Желудков]

Ссылка
Делаю кнопки, ситуация такая:
Эти четыре кнопки дрожат при наведении, что раздражает многих людей. Но дрожат они только, когда браузер на полный экран, если попробовать активировать их в браузере, не на полный экран всё проходит идеально плавно. Кто подскажет в чём может быть проблема?
Может проблема в том, что margin-left в процентах, к тому же через calc()

Comments

[Юрий Денисов]

кстати дрожат и не на полном экране, а в опере так вобще маргин скачет

[Иван Желудков]

Через некоторое время буду тестировать предложенные варианты.

Answer 1

[Илья]

Просто сделайте это через box-shadow, будет лучше.
Измененный код: http://i.imgur.com/beZleKR.png

Comments

[Иван Желудков]

А ведь неплохая идея, всё работает отлично?

[Илья]

Конечно. Это всяко лучше calc с margin и т.д. :)

[Иван Желудков]

И ведь отступы не нужно задавать, ведь точно. В следующий раз в такой же проблеме решу по другому.

Answer 2

[Eugene Mosyukov]

Вот так у меня не дрожит:
(стили с :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%;}

Comments

[Eugene Mosyukov]

Протестировать можно по ссылке: http://dabblet.com/gist/7640561

[Иван Желудков]

В вашем примере всё отлично работает. Поэтому очевидно- это решение. Спасибо за помощь.

[Иван Желудков]

Не дрожит, потому что на dabblet, там реакция почему-то другая. Если открыть обычный html файл с этими данными всё равно дрожит. Попробую метод с box-shadow.

Answer 3

[Юрий Денисов]

там где background задаёте надо так

background: url(http://i.imgur.com/KQMon1l.png) center center

а у transition оставить только border-width и тогда всё ок))

Answer 4

[Юрий Денисов]

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