2011-12-05 19 views
3

私はjQueryのslideDown/slideUpアニメーションをIE9とFirefoxでスムーズに動作しますが、Chromeでは非常に不安定です。 CSSファイルを削除してもこの問題は発生しません。そのため、ChromeとCSSの間の相互作用がかなりわかりました。jQuery/CSSの問題のトラブルシューティング

このような問題の原因を診断するツールはありますか?あるいは、jQueryとCSSのやりとりに関するガイダンスがあります。これは不安定なアニメーションを引き起こす可能性があります。 CSSのリストではないのですか?

ここにCSS用のペーストビンがあります。だれでもCSSに慣れていれば、犯人を指摘することはありません:http://pastebin.com/P68inpkxできるだけ早く、私はまだ、より一般的な "CSSの問題を診断する方法"という質問に興味があるので、これを自分自身で将来行うことができます。

+0

ChromeとSafariに組み込まれているインスペクタ、Firefox用のFirebugプラグインを使用できます。要素を右クリックして[要素の検査]をクリックすると、さまざまなデバッグツールが使用できます。 –

+0

Chromeのシークレットモードで試しましたか?一部の拡張機能もアニメーションとやりとりしている可能性があります。デフォルトでは、シークレットモードではすべての拡張機能が無効になっています。 – Lucero

+0

私はChromeでインスペクタツールを使用しましたが、何を探すべきかわかりません。私はシークレットモードを試したところ、問題は解決しませんでした。 – Tyrsius

答えて

1

私の経験では、-webkit勾配と-webkit-box-shadowは、特にChromeで再描画の問題を引き起こす可能性があります。それが問題ならば、それは低レベルのCSSのレンダリングのパフォーマンスの問題だと思います。

通常、(適切な場合)、css3のアニメーションとトランスフォームを試してみることができます。 3Dモードで使用できるものもあれば、ハードウェアアクセラレーションが可能なため、よりスムーズなアニメーションが得られます。私はそれがこの場合には直接適用できるかどうかはわかりませんが、jQueryの標準アニメーションをcss3アニメーションに置き換えるjQueryプラグインがあると思います(リンクが残っていない、プラグインサイトがダウンしています)。

+0

それはそれでした!ありがとうございました。限り、ガイドまたは同様のCSSの問題のリストは、あなたが知っていますか? – Tyrsius

+0

一般的なCSSミスのリスト(CSSTidyのようなツールを使用すると便利です)が表示されていますが、これはChromeのパフォーマンス上の問題です。グラフィックスの問題が発生すると、私はいつもあなたのボックスシャドウのような合成作業をしています。 CSS変換を行うと、Safariにハードウェアアクセラレーションの対象となるデバッグモードが表示されることがわかりますが、これはブラウザレンダリングの下位レベルの唯一の外観です。http:// mir .aculo.us/2011/02/08/visualizing-webkits-hardware-acceleration / –

関連する問題