Question

我有一个强制比例图像库（like this），出于某种原因，当你用变换缩放图像时，图像会闪烁。我已经尝试了“-webkit-transform-style：preserve-3d”和“-webkit-backface-visibility：hidden”，但它没有解决它。它似乎只发生在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);
}

感谢您的帮助。

Answer 1

我发现了一个“修复”，我用.inner div中的背景图像替换了img。它仍有一点闪烁，但不明显。为什么这只发生在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);
}

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

1 个答案: