CODEWITHSUNDEEP
jquerycssgoogle-chrome
Kyeotic
Kyeotic

Reputation: 19847

Troubleshooting jQuery/CSS Issues

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.

Upvotes: 3

Views: 236

Answers (1)

Andrew Shooner
Andrew Shooner

Reputation: 1200

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).

Upvotes: 1

Related Questions