【问题标题】:jQuery fading images with HTML resize makes them move sometimes带有 HTML 调整大小的 jQuery 褪色图像使它们有时会移动
【发布时间】:2012-03-06 09:36:47
【问题描述】:

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

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

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

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

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

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

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

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

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

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

【问题讨论】:

  • 如果您使用 200px 宽度(而不是 171)进行测试,图像不会移动。你是对的,在 Firefox 中调整大小的图像有些奇怪,但不知道如何解决这个问题
  • 我对 Firefox 10.0.2 for Windows 有同样的问题 :(
  • 我开始了一个关于 mozillaazine 的话题,但还没有被接受。有人知道如何实际制作错误报告吗?谷歌没有那么有帮助:(
  • 有趣的东西 - 如果你将窗口的大小扩大到某种程度,这个错误将会消失 -___-

标签: jquery image firefox-10


【解决方案1】:

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

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

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

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

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

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

【讨论】:

  • 与我一起工作的一位设计师建议尝试一下,他说他之前遇到过类似的文本问题,除非设置了此属性,否则 FF 无法很好地呈现它。我们都不知道它为什么会起作用
猜你喜欢
  • 1970-01-01
  • 2013-11-25
  • 1970-01-01
  • 1970-01-01
  • 2012-01-04
  • 2011-05-23
  • 1970-01-01
  • 2015-11-08
  • 2012-03-29
相关资源
最近更新 更多