Troubleshooting jQuery/CSS Issues

Question

I have a jQuery slideDown/slideUp animation that runs smoothly in IE9 and Firefox, but is very choppy in Chrome. The issue is not present if I remove the css file, so I am fairly confident it is some interaction between Chrome and the CSS for the page.

Are the any tools to diagnose the source of such issues? Alternatively, are there any guides on jQuery/CSS interactions that could cause choppy animations; a list of don't's for CSS?

Here is the pastebin for the CSS, in case anyone is familiar enough with the CSS dont's to finger the culprit: http://pastebin.com/P68inpkx. Even if you can though, I am still interested in the more general "how to diagnose CSS issues" part of the question so I can do this myself in the future.

You can use the inspector built in to Chrome and Safari, or the Firebug plugin for Firefox...using those you can right click any element and click 'Inspect Element' for tons of debugging tools. — Darek Rossman
– Darek Rossman, Commented Dec 5, 2011 at 18:47
Have you tried in incognito mode of Chrome? Some extension may also be interacting with the animation, and by default all extensions are disabled in incognito mode. — Lucero
– Lucero, Commented Dec 5, 2011 at 18:47
I have used the inspector tool in Chrome, but I don't know what to look for. I just tried incognito mode, the problem persisted. — Kyeotic
– Kyeotic, Commented Dec 5, 2011 at 18:52

Andrew Shooner · Accepted Answer · 2011-12-05 18:56:55Z

1

In my experience, -webkit gradients and -webkit-box-shadow can cause repainting issues, specifically in Chrome. If that is the problem, I think it is a lower-level css rendering performance issue.

Generally, you might try (when appropriate), css3 animations and transformations. Some can be used in 3d mode, which allows hardware acceleration, producing smoother animation. I'm not sure it's directly applicable in this case, but I believe there is a jQuery plugin that will replace jQuery's standard animations with css3 animations (sorry no link, the plugin site is down).

answered Dec 5, 2011 at 18:56

Andrew Shooner

1,2003 gold badges12 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kyeotic Over a year ago

That was it! Thank you. As far as the guide, or a list of similar css problems, do you know of any?

Andrew Shooner Over a year ago

I've seen lists of common CSS mistakes (which using a tool like CSSTidy would help with) but in your case this is a Chrome performance issue. When I get graphics problems, I always look out for anything that is doing compositing (like your box-shadow). If you do get into CSS transforms, I know Safari has a debug mode that will show you what is being hardware accelerated, but that is the only look I've had into the lower levels of browser rendering: mir.aculo.us/2011/02/08/…

Collectives™ on Stack Overflow

Troubleshooting jQuery/CSS Issues

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related