6
I'm working on a page turn animationパフォーマンスは残念です。特にpagesクラスを使って800px幅のものにしてください（$('.pages').css({width: '960px', height: '600px'});をコンソールに貼り付けてください）。私は一度に約16回のトランジションを実行していましたが、9回に減らしました。その多くはトランスフォームです！他に何ができるのか分かりません。CSSトランジション、アニメーションのパフォーマンス、動作がひどい。
ChromeはGPUを使用していないようです。これは、（about:flagsでこれを有効）初期ページめくりにFPSスパイクが、その後、定期的にダウンディップ：
はSafariでそれを試してみて、あなたがより良いパフォーマンスを得るが、アニメーションが同期していないことがわかります多くの場合、お互いの背後にたどり着き、同じブラウザにRomán Cortés's project also suffered fromという奇妙な揺れがあります（私はまだFxで動作させていません）。
ウェブ上でCSSのトランジションやアニメーションを最適化する方法についてはあまりよくありませんでしたが、主に自分自身を教えてきました。誰かがこのようなアドバイスをしたいと思っていました。
サファリが気に入っているように、このテクニックを勉強しなければなりません。しかし、MacのChromeでは、ランダムにピクセルが黒くなったり、下のレイヤーがランダムに表示されたりしてレンダリングされます。 –
はい、明らかにChrome 15（？）のWebkitバージョンには、変換が追加されたときに暗黙のzオーダーが乱れてしまうバグがあります。明示的なz-index設定でバージョンに取り組み、それが修正されているかどうかを確認します。 –
'-webkit-transform-style：preserve-3d'を追加したら、それはちらつきのように見えません。私はまだそれがしてはならないいくつかのクリッピングを取得します。 –