Jump to content
Search Community

Suggestions for avoiding a stutter in Webkit browsers?

Darin test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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?

Link to comment
Share on other sites

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.




Link to comment
Share on other sites

Then I might suggest trying with canvas element, I have seen that image rendering seems to behave better when inside a canvas element, so maybe try to include all of the images inside the canvas and then simply animate them as you would normaly. I know this might be a pain to implement and change but it is worth the try.

Generally large images in webkit browser still give me headache...

  • Like 2
Link to comment
Share on other sites

Yeah, if you use Chrome's dev tools and record a timeline, you'll see that you're taking a HUGE hit on image resizes. If you were able to make sure the images were rendered at their native size, it would boost your speed immensely. However, I realize that the whole point in your layout is to make it flexible so that it'll fit just about any size browser window. I suppose you could run a script on the server so that it does the resizing there and spits back natively-sized image files for you. Just one idea. But I agree with Michael71 that Canvas may provide a really nice speed boost too.

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 weeks later...

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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...