使用HTML調整大小的jQuery圖像漸變使其有時會移動

我在使用jQuery 1.7.1的FF10中遇到了一個奇怪的問題。我有一個可能縮小圖像的畫廊，其中一些可以從原始尺寸縮放很多。使用HTML調整大小的jQuery圖像漸變使其有時會移動

會發生什麼情況是，有時，當我嘗試使用jQuery爲其不透明度設置動畫時，圖像會「縮放」或跳到一側。

舉一個例子，看看在這裏的小者之一，和鼠標懸停在上面： http://jsfiddle.net/ZUWkh/

它可以是非常微妙的，但你可以看到圖像的變化時，不透明度動畫 - 只有它似乎會影響已縮小到超過某個特定點的圖像，因爲我無法在此示例中看到它發生在較大圖像上。

任何想法正在發生，以及如何克服它？

我像這樣縮放它們只是爲了將它們放入圖庫中的行中 - 尺寸是用PHP計算出來的，並且是成比例的。如果有區別，我可以使用CSS。

更新： 如果調整瀏覽器窗口，或者放大/縮小的問題變化 - 它沒有得到解決，但該得到碰撞改變，使他們中的一些細算賬的圖像和一些動畫時現在好跳。

另一個更新： 我也注意到，這似乎影響抗鋸齒，作爲淡出的圖像似乎是「鋸齒」，但在光滑完全不透明時。 FF中有什麼新東西可以使圖像看起來更漂亮？

另一個更新： 在Chrome，Mac上的Safari和IE7剛剛測試在XP中，此問題只發生在Mac上FF10（不知道其他平臺或版本）。 Wierd ...

還有另一個更新： 剛剛在XP上用FF9進行測試，這個問題不會發生。然後我將其更新到FF10，然後出現問題。想這可能是一個錯誤報告夠強...

來源

2012-03-06 jammypeach

如果你用200像素寬度（而不是171）測試時，圖像不會移動。你是對的，在Firefox中調整大小的圖像的東西很奇怪，不知道如何解決這個問題 – soju 2012-03-06 11:05:22

我對Windows 10.0.2的Firefox 10.0.2也有同樣的問題:( – 2012-03-06 11:28:45

我已經開始了關於Mozilla的一個主題，但還沒有任何人都知道如何實際製作一個bug報告？谷歌沒有那麼有用:( – jammypeach 2012-03-06 11:40:52

想通了這一個解決方法，不要問我爲什麼這個工程或如何，但如果你風格的

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

這個問題的圖像神奇地消失。絕對要做任何反鋸齒firefox做，因爲應用這種風格的圖像保持antialiased時，不透明度被改變。

除此之外，我不知道爲什麼發生這種情況，或者爲什麼這種解決方案的工作原理。

另外，在IE7/8，safari，chrome等測試沒有問題。

更新 - 即使在應用此風格的情況下，仍然會在Firefox中看到此問題。另一種風格，有時可以幫助是backface-visibility:hidden; - 看到這個博客帖子獲取更多信息：http://css-tricks.com/almanac/properties/b/backface-visibility/

來源

2012-03-06 14:17:12 jammypeach

謝謝，你怎麼找到這個？ – soju 2012-03-06 15:44:30

我與之合作的一位設計師建議嘗試一下，他說在FF之前，如果沒有設置這個屬性，它就會出現類似的問題，我們都不知道它爲什麼起作用 – jammypeach 2012-03-06 16:01:32

使用HTML調整大小的jQuery圖像漸變使其有時會移動

回答

相關問題