Question

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

使用transform：scale / scale3d后，我在Firefox中遇到图像移位/摆动的问题。我假设与半像素有关。我之前已经讨论过这个问题 - 即。 here和here，但所提到的解决方案都没有为我工作。最后我设法修复了＃39;通过调整图像文件的比例或实际尺寸来调整它。

然后在Firefox（v.45.0.1）中发生了一个陌生人的错误，当你第一次将鼠标悬停在它上面时，图像会闪现一个小版本。这只发生一次，但可以通过正常页面刷新再次重新创建。与其他变换以及比例一起发生，例如。旋转（）。除了提交错误报告之外，我还能做些什么吗？等待Firefox修复？还有其他人注意到这个/它是否发生在较旧的Firefox中？

此外，如果有人对图像摆动问题有更好的解决方案，那将是惊人的：）

我为问题设置了Codepen example here尝试不同的修复程序，但目前可以在所有图标上看到Firefox错误。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

干杯：）

Answer 1

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

img {
image-rendering: optimizeQuality;
}

Firefox转换比例图像错误。使用悬停转换过渡

1 个答案: