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

Question

Я пытаюсь отобразить сообщения в блоге с изображением.

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

Проблемакогда происходит переход, мой радиус границы устанавливается по умолчанию, а затем возвращается в 10 пикселей.(См. Верхнюю границу эффекта наведения)

Проверьте мою скрипку, пожалуйста: https://jsfiddle.net/feifles/93w7ryko/3/

body {
  background-color: green;
  padding: 50px;
}

.card {
  border-radius: 10px;
  border: 0;
}

.card img {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.card-columns {
  background-color: green;
}

.zoom {
  overflow: hidden;
}

.zoom img {
  max-width: 100%;
  -moz-transition: all 0.7s;
  -webkit-transition: all 0.7s;
  position: relative;
  transition: all 0.7s;
}

.zoom:hover img,
.zoom:focus img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="card-columns">
      <div class="card zoom">
        <img src="https://cdn1.thr.com/sites/default/files/imagecache/scale_crop_768_433/2018/02/star_trek_tv_spock_3_copy_-_h_2018.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card title that wraps to a new line</h5>
          <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        </div>
      </div>
      <div class="card zoom">
        <img src="https://cdn1.thr.com/sites/default/files/imagecache/scale_crop_768_433/2018/02/star_trek_tv_spock_3_copy_-_h_2018.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card title that wraps to a new line</h5>
          <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        </div>
      </div>
      <div class="card zoom">
        <img src="https://cdn1.thr.com/sites/default/files/imagecache/scale_crop_768_433/2018/02/star_trek_tv_spock_3_copy_-_h_2018.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card title that wraps to a new line</h5>
          <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Ошибка / проблема, кажется, происходит только на Chrome

Answer 1

В переходе есть некоторые ошибки, которые доступны только в Google Chrome, поэтому для этого есть два полезных элемента CSS:

  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);

-webkit префикс используется для Chrome, а -moz используется для Firefox.

Ваша обновленная скрипка - https://jsfiddle.net/gp8k0zm4/