褪色背景图像在Firefox中移动

Question

我正在使用此处概述的方法在元素悬停时淡入背景图像。

我的代码笔示例： http ://codepen.io/anon/pen/vqtjf

HTML：

<div><span></span></div>

CSS：

div {
    position: relative;
    width: 219px;
    height: 218px;
    background: url(https://dl.dropboxusercontent.com/u/3454522/home-option-icon-off.png) no-repeat;
}

span {
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background: url(https://dl.dropboxusercontent.com/u/3454522/home-option-icon-energy.png) no-repeat;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition:    opacity 0.5s;
    -o-transition:      opacity 0.5s;
}

div:hover span {
    opacity: 1;
}

我遇到的问题是，在Firefox（Mac）中，跨度的背景图片与跨度的背景图片不太一致，因此当淡入时您会看到很小的移动（在Codepen中，移位是垂直的，但在我的项目中，其中的代码是许多其他垃圾中的代码，我实际上进行了水平移位）。 如果调整Firefox窗口的大小，此问题已解决。

可以在此处查看效果的截屏视频： https : //dl.dropboxusercontent.com/u/3454522/firefox-fadebg-problem.mp4 （以100％的比例查看该问题的细微之处）。

关于导致此问题的原因或解决方法的任何想法？

Answer 1

我认为这是Firefox如何使用不透明动画渲染图像的回归，特别是当图像已使用HTML宽度/高度属性（通常是一半以上）调整大小时。 效果可能非常微妙，例如轻微的偏移（〜1 px）或某种抗锯齿。

STR：
1.打开我加入的测试用例
2.将鼠标移到图像上以设置不透明度的动画
3.尝试不同的缩放级别以观察偏移/抗锯齿

解决方法：添加“ box-shadow：＃000 0em 0em 0em;” 图像修复了错误的渲染。

来源： https : //bugzilla.mozilla.org/show_bug.cgi?id=745549

Answer 2

我有同样的问题。 通过在图像css中添加以下内容来解决该问题。

transform: translate3d(0,0,0);