Почему непрозрачность при наведении заставляет гибких детей во втором ряду двигаться / меняться?

Question

Эй, ребята, посмотрите на этот пример.(Смотрите в полноэкранном режиме). Вы можете видеть, как элементы изменяют прозрачность при наведении.

Однако элементы сгибания, которые сгибаются во втором ряду, похоже, перемещаются или изменяют высоту при этом же наведении ... Это похоже на эффект отскока.Ничто не должно отличаться, кроме непрозрачности.Я пробовал только непрозрачность таргетинга в моем переходе, пробовал flex: 0 0 23%;поэтому ссылки не должны менять размер, но все равно получают тот же результат.

По сути, с тех пор, как я добавил прозрачность при наведении / переходе, второй ряд гибких элементов отскакивает при наведении.

Что происходит?

.nav-dropdown {
  display: block;
  width: 100%;
  max-width: 980px;
  padding: 30px;
  background-color: #fbfbfb;
}

.nav-dropdown-image-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.image-link {
  flex: 0 1 23%;
  margin-bottom: 20px;
}

.image-link a {}

.image-link a img {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  opacity: 1;
  transition: 0.3s;
}

.image-link a img:hover {
  opacity: 0.9;
}

<div class="nav-dropdown">
  <div class="nav-dropdown-image-links">
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
  </div>
</div>

Answer 1

Используйте следующий стиль

.image-link * {
    -webkit-backface-visibility: hidden;
}

Эта ссылка объясняет, почему она нам нужна.

.nav-dropdown {
  display: block;
  width: 100%;
  max-width: 980px;
  padding: 30px;
  background-color: #fbfbfb;
}

.nav-dropdown-image-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.image-link {
  flex: 0 1 23%;
  margin-bottom: 20px;
}

.image-link a {}

.image-link a img {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  opacity: 1;
  transition: 0.3s;
}

.image-link a img:hover {
  opacity: 0.9;
}
.image-link * {
    -webkit-backface-visibility: hidden;
}

<div class="nav-dropdown">
  <div class="nav-dropdown-image-links">
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
  </div>
</div>