4

我在使用 jQuery 1.7.1 的 FF10 中遇到了一个奇怪的问题。我有一个可能缩小图像的画廊,其中一些可以从原始尺寸缩小很多。

有时,当我尝试使用 jQuery 为其不透明度设置动画时,图像会“缩放”或跳到一侧。

举个例子,看看其中一个小的,然后将鼠标悬停在上面:http: //jsfiddle.net/ZUWkh/

它可能非常微妙,但是当不透明度被动画化时,您可以看到图像的变化——它似乎只影响缩小到某个点以上的图像,因为在这个例子中我看不到它发生在更大的图像上。

任何想法正在发生什么,以及如何克服它?

我像这样缩放它们只是为了将它们放入画廊中的行中 - 尺寸是用 PHP 计算出来的并且是成比例的。如果有区别,我可以改用 CSS。

更新: 如果您调整浏览器窗口的大小或放大/缩小,问题会发生变化 - 它不会得到解决,但会发生碰撞的图像会发生变化,因此其中一些在之后很好,而一些很好现在在动画时跳转。

另一个更新: 我还注意到这似乎会影响抗锯齿,因为淡出的图像似乎是“锯齿状的”,但在完全不透明时是平滑的。FF 中的一些新东西可以让图像看起来更漂亮吗?

另一个更新: 刚刚在 Chrome、Mac 上的 Safari 和 XP 上的 IE7 上测试过,这个问题只发生在 Mac 上的 FF10 上(不知道其他平台或版本)。奇怪...

又一个更新: 刚刚在 XP 上用 FF9 测试过,这个问题没有发生。然后我把它更新到FF10,问题就出现了。认为这对于错误报告来说可能足够强大......

4

1 回答 1

9

想出了解决这个问题的方法,不要问我为什么会这样或如何工作,但如果你用

box-shadow: #000 0em 0em 0em;

这个问题神奇地消失了。绝对与 firefox 所做的任何抗锯齿有关,因为应用了这种样式,当不透明度发生变化时,图像会保持抗锯齿。

除此之外,我不知道为什么会发生这种情况或为什么这个解决方案有效。

此外,在 IE7/8、safari、chrome 等中测试没有问题。

更新 - 仍然看到这个问题,即使应用了这种样式,仅在 Firefox 中。有时可以提供帮助的另一种样式是backface-visibility:hidden;-有关更多信息,请参阅此博客文章:http: //css-tricks.com/almanac/properties/b/backface-visibility/

于 2012-03-06T14:17:12.637 回答