4

CSS アニメーションを PNG 画像に追加すると、画像のレンダリング品質が大幅に低下するという問題があります。

3 つの個別の PNG を含む div があり、いずれかの画像にアニメーションを追加すると、すべての画像の品質が低下します。

アニメーションには変換回転が含まれていますが、これを画像だけ (アニメーション キーフレームの外側) に追加しても、品質が低下することはありません。また、画像の親要素に適用された他のすべての変換を削除し、遠近法などの他のプロパティを削除しようとしましたが、これは役に立ちません。品質の低下は、アニメーションを追加する場合のみです。

私はこれをChromeで見ています。画像の外観は、画像レンダリング時の外観とまったく同じです: -webkit-optimize-contrastが追加されています。

他の誰かが同様の問題に遭遇しましたか?

4

1 に答える 1

2

画像がブラウザーに依存して画像のサイズを縮小する場合、これがクロムの問題になる可能性があることに気付きました。Chrome は画像操作プログラムではなく、トランジションを実装する際に品質よりもレンダリング速度を優先するようです。サイズを大幅に変更する必要のない画像で同じアニメーションを試して、それが役立つかどうかを確認してください。

于 2014-04-16T13:54:30.900 に答える