I am hopeful that someone might be able to offer a suggestion or two about how I might work around an issue that I'm experiencing.
The project I am working on is most easily described as a carousel animation sitting on top of a full screen slideshow. It is designed so that when the user clicks on one of the divs that make up the carousel, the background image transitions to the corresponding image as the caousel divs tween to their next position.
In IE and Firefox, the animation is perfectly smooth, but when viewed in a Webkit browser, there is a stutter in the carousel motion occurring at the same point that the new background image begins tweening its opacity. Because the background images are full screen, it's my assumption that the stutter is a result of the browser rendering the image and not having to do with the tweening of the carousel panels, but the effect is clearly visible in the tweening.
I have tried adjusting the timing of the background transition, starting it slightly before the motion and slightly after. I have also reworked the background animation plugin (anystretch and later vegas) to use gsap for its opacity tween in place of jQuery. I then reduced the height/width of the background images (Though they are still being displayed full screen), and also compressed the jpgs to the point of artifacts in an attempt to reduce file size.
I have found a bit of success by swapping the background images for 10px single color squares, though it's not a viable solution.
I have put together a fiddle, more like thrown it together from bits and pieces in an attempt to demonstrate the issue. The example can be seen here: http://fiddle.jshell.net/jm23r/35/show/
Does anyone have an idea about how I might either optimize this process specifically for webkit, or more generally reduce the resource utilization in order to smooth out the motion?