4

jQuery 1.7.1 を使用して FF10 で奇妙な問題が発生しています。画像を縮小した可能性のあるギャラリーがありますが、元の寸法からかなり縮小できるものもあります。

jQueryを使用して不透明度をアニメーション化しようとすると、画像が「ズーム」または片側にジャンプすることがあります。

例として、ここで小さいものの 1 つを見て、その上にマウスを置きます: 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 に答える