I have a slider which is now completely unusable in the latest versions of chrome and safari, older versions show it fine. While developing it I tested chrome, firefox and IE, They all worked fine (except some style issues in the older ie's but the animation was fine).

I can not figure this one out at all, there are no js errors, I profiled it and that looks ok. I tried making a simple test case to profile it but got the exact same behavior.

I really hope someone has some idea of what's going wrong here.

Edit: I'll also note that I've searched high and low, read many "slow animations in chrome" issues, none of which have been any help. Remember, this worked absolutely fine until a recent update affecting chrome and safari. The version of chrome I'm using is Version 23.0.1271.97 m, if you have an older version it may appear correctly.

Also this has been verified as broken on multiple machines running windows, and os x, so clearing my cache isn't going to sort it :( Removing everything else on the page seems to help the issue, but the frame rate of the animation is still god awful.
–
Liam PotterJan 10 '13 at 17:59

1 Answer
1

I've figured it out. The answer, in my opinion, is not obvious, if it is to someone else, could they explain it to me please?

So, animate.css applies -webkit-backface-visibility:hidden; to the body tag. For some reason, this caused all the problems I've faced with the javascript animation being awful. Luckily I'm not using the 3D animations from that library, so I can remove it and solve my issue.

Now, I'm not sure if this is a bug in webkit or a bug in animate.css, I'm leaning towards it being a problem with webkit as I don't understand why that property should cause the slowdowns it did to none css animations.