“变换：缩放”在图像悬停时闪烁答案

【问题标题】："Transform: scale" flickering on image hover“变换：缩放”在图像悬停时闪烁
【发布时间】：2018-03-11 22:59:51
【问题描述】：

我有一个强制比例的图像库 (like this)，由于某种原因，当您使用变换缩放图像时，图像会闪烁。我已经尝试过“-webkit-transform-style：preserve-3d”和“-webkit-backface-visibility：hidden”，但它没有修复它。似乎它只发生在chrome中。

带有一张图片的实时版本，您可以在其中看到砖块的线条闪烁（chrome）：https://codepen.io/Nanetten/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);
}

感谢您的帮助。

【问题讨论】：

我看不到闪烁。你能录制一个gif并发布它吗？我使用Cloud App。
我认为是因为我改变了过渡时间，它现在应该闪烁 codepen.io/Nanetten/pen/boRQVE GIF: imgur.com/a/eUwl0
我用这个短语 transform: scale blurry lines 做了一些谷歌搜索，并在你的 codepen 上尝试了几件事，但没有任何区别。它似乎在 Chrome 上最差，在 Firefox 上更好，在 Safari 上几乎不错，使用最新版本，fwiw。

标签： html css

【解决方案1】：

我找到了一个“修复”，我将 .inner div 中的 img 替换为 background-image。它仍然有一点闪烁，但并不明显。为什么这只发生在 Chrome 中我仍然不知道。

带有 chrome 修复的 Live 版本：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);
}

【讨论】：