疑难解答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问题

回答

相关问题