Hover image scale shake bug

Question

Today I want to make CSS hover in my project.

When I hover the item and scale image element with CSS, I set transform: scale and transition. The item border shake.

I try to add will-change: transform;, nothing has changed.

---

GIF (JSFiddle Result panel width: 975px):

Bug Here:

---

JSFiddle

.grid-container {
      margin-right: auto;
      margin-left: auto;
      padding-right: 20px;
      padding-left: 20px;
      max-width: 102.5rem;
    }
    .card {
      display: flex;
      flex-flow: row wrap;
      margin-bottom: 0;
      margin-right: -0.625rem;
      margin-left: -0.625rem;
      list-style: none;
    }
    .card__item {
      flex: 0 0 auto;
      margin-bottom: 1.25rem;
      margin-right: 0.625rem;
      margin-left: 0.625rem;
      width: calc(33.33333% - 1.25rem);
      min-width: 0;
      min-height: 0;
    }
    .card__link {
      position: relative;
      display: block;
      overflow: hidden;
      background-color: #fff;
      box-shadow: 0 0 18.4px 1.6px rgba(0, 0, 0, 0.3);
      transition: box-shadow 0.3s;
      cursor: pointer;
    }
    .card__link::before {
      content: '';
      display: block;
      padding-top: 56.25%;
    }
    .card__img-box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-position: center center;
      background-size: cover;
      transition: transform 0.3s;
    }
    .card__text-box {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      text-align: center;
      color: #fff;
    }
    .card__title {
      margin-top: 0;
      margin-bottom: 0;
      font-size: 1.8rem;
      font-weight: 500;
      line-height: 1.5;
    }

    /* Hover */
    .card__link:hover {
      box-shadow: 0 0 18.4px 1.6px rgba(0, 0, 0, 0.5);
    }

    .card__link:hover .card__img-box {
      transform: scale(1.1);
    }

<div class="grid-container">
  <ul class="card">
    <li class="card__item"><a class="card__link" href="#">
        <div class="card__img-box" style="background-image: url(https://picsum.photos/480/270);"></div>
        <div class="card__text-box">
          <h3 class="card__title">Lorem Ipsum</h3>
        </div>
      </a></li>
    <li class="card__item"><a class="card__link" href="#">
        <div class="card__img-box" style="background-image: url(https://picsum.photos/480/270);"></div>
        <div class="card__text-box">
          <h3 class="card__title">Lorem Ipsum</h3>
        </div>
      </a></li>
    <li class="card__item"><a class="card__link" href="#">
        <div class="card__img-box" style="background-image: url(https://picsum.photos/480/270);"></div>
        <div class="card__text-box">
          <h3 class="card__title">Lorem Ipsum</h3>
        </div>
      </a></li>
  </ul>
</div>

Why this bug showing?

How can I fix bug?

---

Answer 1

Looks like a browser bug (confirmed in firefox)

It looks like you can workaround it by adding a transform: scale(1) to its container (the .card__link).