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

Posted 2023-03-06

【中文标题】Firefox 变换比例图像错误。使用悬停变换过渡时，图像会闪烁自身的一个小版本

【英文标题】：Firefox transform scale image bug. Image flashes a small version of itself when using hover transform transition

【发布时间】：2016-07-21 05:56:19

【问题描述】：

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

使用 transform: scale/scale3d 后，我在 Firefox 中遇到了图像移动/摆动的问题。我假设与半像素有关。我之前已经看到过这个问题 - 即。 here 和 here，但在任何地方提到的解决方案都不适合我。最后，我设法通过调整缩放比例或图像文件的实际大小来“修复”它。

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

另外，如果有人对图像摆动问题有更好的解决方案，那就太棒了:)

我已经设置了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" >
</div>

干杯:)

【问题讨论】：

固定在这里 - bugzilla.mozilla.org/show_bug.cgi?id=1225934

【参考方案1】：

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

img 
image-rendering: optimizeQuality;

【讨论】：

谢谢！在 Firefox 45.0 和 Ubuntu 14 上也适用于我！