Darin

Just wanted to give an update. After a cursory glance at the specifics of canvas and determining that previous versions of IE don't support its use, I shelved the idea. The site this is being developed for is required to support >=IE7. I spent a bit of time working with a PHP/GD proxy to return resized images, and while this works pretty well for a static sized viewport, it suffers in a liquid layout. I've identified the issue as being a result of a WebKit "feature" instead of a bug. The algorithm used by webkit to resize images, while slow, results in a higher quality image. It appears that somewhere down the line a decision was made to favor look over performance. I will continue to look for viable solutions, but wanted to thank you both again for your assistance.

Thanks Jack, I appreciate the guidance. I apologize for the delayed response. It appears that I've had a Christmas around this place as my children have officially lost their minds. I have not yet made the transition to canvas, but it is on my list of things to start in the next few days. It's going to require me to either make my own responsive canvas switchy thing, or dig into the vegas/anystretch code and coerce it into working with canvas. Both of these things will require me to know more about canvas than I currently do, so some studying is necessary. Thanks again for the suggestions guys. Wishing you a great new year.

Thanks Michael, that's a good suggestion. I'll give it a try.

Thanks very much for the suggestion Michael, though at the time of the stuttering, none of the elements are hidden. The panels initially load as 'hidden', but are animated into place when the document is ready. From that point on, all panels remain visible. Regards, Darin

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?