Question

I’m building a fullscreen slideshow and I’ve tried to use positioning, margins, and now ScrollTo to make the left/right slide.

But each time there’s always a performance gap to bridge over. I’ve yet to find a good way to do this and I’m reaching out for some help. I’ve also tried pure CSS, which worked well but just doesn’t work in the browsers I need it to.

I’ve got a simple demo here: http://jsfiddle.net/qkRvS/2/embedded/result/
and the code at: http://jsfiddle.net/qkRvS/2/

Could somebody point me in the right direction to make this as smooth as possible? It seems to have little hitches on each image change.

Thanks!

Answer 1

Unfortunately I don’t think there is a happy answer for you. CSS3 transitions of CSS3 transforms gives the best performance in the browsers that support it. For ie7-8 manipulating the left property out performs scroll, but in will likely never look terribly smooth on ie7-8. Firefox performance is not great either, but getting better. In some instance’s I’ve found left to be more performant in firefox than -moz-transform but that may have changed in the last version. So tips:

• Compress your images as much as possible. Use .jpgs if possible.
• Do testing of each method in each browser
• Use the most performant method for each browser
• If you are using jQuery’s animate method, you may want to tweak the frame-rate from 16ms to something like 30ms so the browser does not get as hammered by repaints.