“變換：縮放”在圖像 hover 上閃爍

Question

我有一個強制比例的圖像庫（ 像這樣），由於某種原因，當您使用變換縮放圖像時，圖像會閃爍。 我已經嘗試了“-webkit-transform-style: preserve-3d”和“-webkit-backface-visibility: hidden”，但沒有解決。 似乎它只發生在 chrome 中。

帶有一張圖像的實時版本，您可以在其中看到磚塊的線條閃爍（chrome）： https：//codepen.io/N.netten/pen/boRQVE

<div class="grid-item grid-item--width6">
  <div class="item">
    <div class="outer half">
      <div class="inner"><img src="https://image.ibb.co/fOAxqb/1.jpg" alt="test"></div>
    </div>
  </div>

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
}

.item {
  display: inline-block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  -webkit-transition: all .1s ease-in-out;
  -o-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
}
.item .outer {
  position: relative;
  height: 0;
}
.item .inner {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.item img {
  width: 100%;
  height: 100%;
  transition: all .5s ease-out;
  display: block;
}
.item img:hover {
  -webkit-transform: scale(1.15);
  -ms-transform: scale(1.15);
  transform: scale(1.15);
}

.half {
  padding-top: calc(50%);
}


.grid-item {
  float: left;
  display: block;
  margin: 5px;
}

.grid-item--width6 {
  width: calc(50% - 10px);
}

感謝您的幫助。

Answer 1

我找到一個“修復程序”，將.inner div中的img替換為background-image。 它仍然有些閃爍，但不明顯。 為什么只在Chrome中發生這種情況，我還是不知道。

帶有Chrome修復程序的實時版本： https ： //codepen.io/Nanetten/pen/boRQVE [取消注釋html中的img以查看差異]

.inner {
  background-image: url(https://image.ibb.co/fOAxqb/1.jpg);
  background-size:cover;
  transition: all 1s;
}
.inner:hover {
  -webkit-transform: scale(1.15);
  -ms-transform: scale(1.15);
  transform: scale(1.15);
}

Answer 2

我有同樣的問題，最后做了這樣的事情

image {
 object-fit: fill;
 transition: transform 0.3s ease;
 transform-origin: center;
 transform: scale(1.01); //add this line to get over the flicker effect
   &:hover {
      transform: scale(1.14);
   }
}