Как победить «дрожащий» input после наведения?

Question

[Iliya V. Soldatkin]

Подскажите, пожалуйста, как избавиться от такого бага: https://www.loom.com/share/3c3cc4fdc0ac42dbaa5e94b...
При отведении курсора с инпута, если использовать transition, происходит его расширение, см.видео.

Код:

.header__btn_search {
  margin-top: 15px;
  background-color: transparent;
  background-image: url("../img/icons/search-ico.png");
  background-repeat: no-repeat;
  background-position-x: right;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease-in-out;
}

.header__btn_search:hover {
  height: 27px;
  width: 145px;
  border: 2px solid #506a85;
  border-radius: 3px;
  background-color: #fff;
}

Comments

[Innoel]

У Вас ещё скачет хэдер при закрытии меню на мобильной версии. (Android. Chrome последняя версия).

Answer 1

[Iliya V. Soldatkin]

Вопрос в разнице размеров исходного и при наведении. Решается установкой одинаковых высот в данном случае.

Answer 2

[Jan van Eyck]

Размеры в состоянии hover 145x27. А в обычном состоянии сколько?? Судя по видео там обычная высота элемента где-то 16px, а потом становится резко 27! Но transition не на высоту ведь назначен - еще бы ему не дрожать. Вы ведь хотите чтобы плавно менялись размеры?..

По наведению меняется background-color, а transition указан на background в целом - не слишком-то грамотно (а вообще работает оно так?..)

Еще и бордер появляется по наведению. Если у элемента нет box-sizing: border-box, то и тут будет "колбасить".

В целом код выглядит так, будто автор не до конца понимает (или совсем никак), как устроен CSS, но хочется (или нужно) сделать самостоятельно. Прямо как я в JS =))

Comments

[Iliya V. Soldatkin]

Мы все учились понемногу чему-нибудь и как-нибудь..)