Firefox 转换比例图像错误。使用悬停变换过渡时，图像会闪烁其自身的小版本

Question

在尝试修复一个错误时我遇到了另一个错误，很确定是在我今天更新 Firefox 版本时遇到的。我试图在悬停时稍微缩放图像以获得缩放效果。

使用转换后，我在 Firefox 中遇到图像移动/摆动问题：scale/scale3d。我假设与半像素有关。我已经看到这个问题之前被讨论过 - 即。 here and here，但在任何地方提到的解决方案中有 none 对我有用。最后，我通过调整比例或图像文件的实际大小设法 'fix' 它。

但随后 Firefox (v.45.0.1) 开始出现一个奇怪的错误，当您第一次将鼠标悬停在图像上时，图像会闪烁其自身的一个小版本。这只会发生一次，但可以通过执行正常的页面刷新再次重新创建。与其他变换以及缩放一起发生，例如。旋转（）。除了提交错误报告并等待 Firefox 修复之外，我还能做些什么吗？有没有其他人注意到这个/它是否发生在旧的 Firefoxes 中？

此外，如果有人能更好地解决图像摆动问题，那就太棒了:)

我已经设置了一个 Codepen example here 尝试对摆动问题进行不同的修复，但是目前在所有图标上都可以看到 Firefox 错误。

.hoverPop {
  -webkit-transition: all 0.5s cubic-bezier(0.42, 0, 0.42, 1);
  -webkit-transition: all 0.5s cubic-bezier(0.42, 0, 0.42, 1.75);
  transition: all 0.5s cubic-bezier(0.42, 0, 0.42, 1.75);
}
.hoverPop:hover {
  -webkit-transform: scale3d(1.2, 1.2, 1.2);
  transform: scale3d(1.2, 1.2, 1.2);
}
img {
  border: 0;
  vertical-align: middle;
  max-width: 100%;
}
.imgwrap {
  width: 65px;
  margin: 0 auto 12px auto;
  height: 65px;
}

<div class="imgwrap">
  <img class="hoverPop" src="http://i1175.photobucket.com/albums/r631/Bananafarma/testIcon_zpsfrhmw5qd.png" alt="test">
</div>

干杯:)

Answer 1

我通过添加以下内容解决了这个问题。这修复了 FF v45.0.1 错误，该错误为我在悬停时显示较小的图像并进行了过渡。

img {
image-rendering: optimizeQuality;
}

Firefox 转换比例图像错误。使用悬停变换过渡时，图像会闪烁其自身的小版本

Firefox transform scale image bug. Image flashes a small version of itself when using hover transform transition

css

firefox

css-transitions

css-transforms