Question

我使用概述here的方法在元素悬停时淡入背景图片。

我的codepen示例： 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）中，跨度的背景图像与跨度的背景图像不完全对齐，因此当它渐渐消失时，您可以看到一个小的移动（在码本中的移动是垂直的，但在我的项目中，代码是很多其他垃圾中我实际上有一个水平移位）。如果您调整Firefox窗口的大小，问题就会解决。

这里可以看到效果的截屏视频： https://dl.dropboxusercontent.com/u/3454522/firefox-fadebg-problem.mp4 （以100％查看以查看微妙的问题）。

有什么想法导致这个或如何修复？

Answer 1

我认为这是Firefox如何使用不透明度动画渲染图像的回归，尤其是在使用HTML宽度/高度属性（通常超过一半）调整图像大小时。效果可能非常微妙，如轻微偏移（~1 px）或一种抗锯齿效果。

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

替代方法：添加＆＃34; box-shadow：＃000 0em 0em 0em;＆＃34;图像修复了糟糕的渲染。

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

Answer 2

我遇到了同样的问题。通过在图像css中添加以下内容解决了这个问题。

transform: translate3d(0,0,0);

淡入淡出背景图像在Firefox中移动

2 个答案: