I'm building a javascript application that uses CSS transitions to fade the content container before swapping out the content and fading back in.
It appears that Chrome waits for about half a second before beginning the transition. It usually then completes the transition really quickly and jerkily. In all other browsers it seems to work really smoothly.
What is strange is that if I click the menu with a frequency of about once a second, it works smoothly. If I click with a slower frequency, it starts to execute with the delay and jerky animation again.
I am creating the animation by adding an 'invisible' class with an opacity 0 to my content div. This div has the properties:
-webkit-transition-property: opacity;
-webkit-transition-duration: 0.5s;
-webkit-transform: translateZ(0);
I am running osx Lion on a fast iMac. As I say it works fine in other browsers to I don't think the problem is hardware related. If I set a timer just before I add the class to time the transition it says it completes in 10ms. It could be a javascript issue, but I don't think so, because I've logged every line from button click to adding the css class and it just seems to stop and wait.
All my images come off 5 spritesheets which are fairly large (600-800kb). If I change the name of these images so the browser can't find them, the delay problem becomes less severe. All these images are loaded at runtime though so the delay can't be explained by the request.