Firefox变换比例图像bug。当使用悬停变换过渡时，图像会闪烁出一个小版本的自己。
Firefox变换比例图像bug。当使用悬停变换过渡时，图像会闪烁出一个小版本的自己。
在试图修复一个bug的时候，我又遇到了另一个bug，我很确定是因为我的Firefox版本今天更新了。我想要在鼠标悬停时稍微缩放一张图片，以实现放大效果。\n在使用transform: scale/scale3d后，我在Firefox中遇到了图片移动/抖动的问题。我猜测这与半像素有关。我之前看到过关于这个的问题 - 例如这里和这里，但是这些地方提到的解决方法都没有对我起作用。最后，我通过调整缩放比例或者图片文件的实际大小来“修复”了这个问题。\n但是在Firefox (v.45.0.1)中又出现了一个奇怪的bug，当你第一次悬停在图片上时，它会闪烁出一个小版本的自己。这只会发生一次，但是可以通过正常刷新页面再次重现。使用其他transform，比如rotate()，也会出现这个问题。除了提交一个bug报告并等待Firefox修复之外，我还能做些什么吗？还有其他人注意到这个问题了吗？在旧版本的Firefox中会发生这个问题吗？\n另外，如果有人对图片抖动问题有更好的解决方法，那将是太棒了 :)\n我在这里设置了一个Codepen示例，尝试了不同的修复方法来解决抖动问题，但是Firefox的bug目前在所有的图标上都可以看到。\n
.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;
}
\n
\n谢谢 🙂
