jsfiddle： http: //jsfiddle.net/UenFN/。アニメーションの後のわずかな短いピクセル化に注意してください。このエラーは、WebKitブラウザーでのみ発生します。
jQueryを使用して、画像のサイズを小さいサイズに変更します。新しい寸法は、正確に古い寸法の半分です。ただし、サイズを変更した直後は、画像がわずかにピクセル化されて表示され、約2秒後に見栄えが良くなります。
この問題を解決するにはどうすればよいですか？
編集：まだ進歩はありません。どんなアイデアでも大歓迎です。
解決策は、Webkitでハードウェアアクセラレーションを有効にすることです。
img {
-webkit-transform: translate3d(0, 0, 0);
}
常に親divに合うように画像とHTMLのサイズを変更する小さなライブラリがあります。Safariは、バイキュービックパスを実行する前にすばやくダーティパスを実行する独自の方法で私を悩ませました。ハードウェアアクセラレーションを強制することで問題は解決しました。私の場合、多くのサイズ変更を行うと、パフォーマンスがいくらか低下することに気付きますが、最終的にはオーバーホールの結果がより魅力的です。
この修正はここでテストできます：http ： //www.visualfox.me/app/nanjing-2014 Safariでは、サイズ変更、アップスケール、ダウンスケールに関係なく、マスクとして使用される画像がピクセル化されることはありません（ブラウザーのサイズを変更してテストするだけです）。 ）。これを、修正を使用しないこの他のデモと比較できます。http : //www.visualfox.me/app/boldブラウザーのサイズを変更すると、ロゴが一時的にピクセル化されることに注意してください。
私の！楽しい！
完了時のサイズがネイティブ画像のサイズである場合にのみ、それが行われないことを発見しました。
150〜300ピクセル、ピクセル化なし...
そして450から300ピクセルまで、まだピクセル化はありません...
したがって、修正または回避策は、可能な限り、最終的なサイズがネイティブの画像サイズであることを確認することです。
目的の寸法に適した画像を使用できます。それができない場合は、コールバックメソッドを使用して、サイズ変更された画像を新しいサイズの画像に置き換えることができます。あなたがしていることは、画像を引き伸ばすことと何ら変わりはありません（実際、それはまさにあなたがしていることです）ので、ピクセル化が起こります。
これを修正するために、同じ画像をもう一度挿入しましたが、使用したいサイズで挿入しました。アニメーションのミリ秒後、メイン画像を以前に非表示にした画像に置き換えます。
jsfiddle： http: //jsfiddle.net/wLwrc/1/
2013年に解決されました。https：//bugs.webkit.org/show_bug.cgi？id = 74600
image-rendering: optimizeQuality;
私はまったく同じ問題を抱えていました。サイズをアニメーション化していた*.jpgを*.svgに変更すると、ピクセル化がなくなりました。