<img/>
Web ページで、タグをスケーリングしています。
このために、jquery.animate
メソッド (https://github.com/louisremi/jquery.transform.js) を介してリンクされた css3 変換スケール関数を使用します。全体として、結果は Firefox と IE9 で良好です。しかし、Webkit ブラウザー (特に chrome 21) では、パフォーマンスが大幅に低下し、アニメーションの見栄えも良くありません。
そこで、chrome devtool のタイムラインを見ていきます。そして、問題は間違いなく の再描画によって引き起こされ、<img/>
画像の再描画にかかる時間は信じられないほど長くなります。
ご存知のように、私たちは頻繁に dom にアクセスせず (アニメーション中は絶対にアクセスしません)、 を使用しますrequestAnimationFrame
。問題は、webkit が画像のサイズを変更するために使用するアルゴリズムにあるようです。css を追加-webkit-transform-style: preserve-3d;
しました。これは少し役に立ちましたが、それほどではありませんでした。
誰にもこれに関するヒントはありますか?