疑難解答jQuery/CSS問題

我有一個jQuery slideDown/slideUp動畫在IE9和Firefox中平穩運行，但在Chrome中非常不穩定。如果我刪除了css文件，問題就不存在了，所以我相當確信這是Chrome和頁面的CSS之間的一些互動。疑難解答jQuery/CSS問題

是否有任何工具可以診斷此類問題的來源？或者，是否有任何有關jQuery/CSS交互的指南，可能導致動盪不安的動畫;不是用於CSS的列表？

這裏是CSS的pastebin，以防任何人對CSS非常熟悉，不要指責罪魁禍首：http://pastebin.com/P68inpkx。即使你可以，我仍然對更廣泛的「如何診斷CSS問題」部分問題感興趣，所以我可以在將來自己做這件事。

來源

2011-12-05 Tyrsius

您可以使用內置在Chrome和Safari中的檢查器或Firefox的Firebug插件......使用它們可以右鍵單擊任何元素，然後單擊「Inspect Element」以查看大量調試工具。 –

您是否嘗試過Chrome的隱身模式？某些擴展程序也可能與動畫進行交互，默認情況下，所有擴展程序在隱身模式下均處於禁用狀態。 – Lucero

我在Chrome中使用了檢查器工具，但我不知道要尋找什麼。我剛剛嘗試了隱身模式，問題依然存在。 – Tyrsius

根據我的經驗，-webkit漸變和-webkit-box-shadow可能會導致重繪問題，特別是在Chrome中。如果這是問題，我認爲這是一個較低級別的css渲染性能問題。

通常，您可以嘗試（適當時），css3動畫和轉換。有些可以在3D模式下使用，它允許硬件加速，產生更流暢的動畫。我不確定它在這種情況下直接適用，但我相信有一個jQuery插件可以用css3動畫代替jQuery的標準動畫（抱歉沒有鏈接，插件網站關閉）。

來源

2011-12-05 18:56:55

就是這樣！謝謝。至於指南，或類似的CSS問題列表，你知道嗎？ – Tyrsius

我看過常見的CSS錯誤列表（使用像CSSTidy這樣的工具會有幫助），但在你的情況下，這是一個Chrome性能問題。當我遇到圖形問題時，我總是注意任何正在進行合成的東西（比如你的盒子陰影）。如果你確實進入了CSS轉換，我知道Safari有一個調試模式，可以告訴你什麼是硬件加速，但這是我在瀏覽器渲染的較低級別中唯一的表現：http：// mir .aculo.us/2011/02/08 /可視化 - webkits硬件加速/ –

疑難解答jQuery/CSS問題

回答

相關問題