“变换：缩放”在图像 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);
   }
}