Question

The site in question is http://bit.ly/7MeLwc

In the honor roll section, when I view the next set of images in Chrome/Safari, the images seem to be cut up, until I mouse over them. But on Firefox, it works fine!

What could be causing such behavior in Webkit?

Answer 1

This is a genuine bono-fide webkit bug. Not your fault, your code is correct, responsibility here lies with webkit’s rendering implementation. Luckily there is a fix!

Currently you are animating the margin-left property of #list_wrapper, and this is what is causing the chop. So there is an easy work around and a better work around.

EASY!

Set #list_wrapper to position:relative with css and then animate the left property instead of left-margin. (actually margin-left will still work, but is not as good, so you COULD just use position:relative to fix this thang)

The downside here is its not very efficient for the browser (margin-left animation is pretty bad too)

Better!

Set the #list_visible to position:relative and set it’s height appropriately (otherwise it will default to zero and your list will disappear). Then set the #list_wrapper to position:absolute and animate using the left property.

The advantage here, is that because we are animating an object that is position:absolute, it will not require a reflow of the entire document on each animation frame, making for much more efficient animation!

BESTER!

If you want to get fancy with it, you can look into css3 transitions and using transform to to move your slides. This will result in high fives from html5 people, as well has hardware acceleration when possible, (iPad animation will be smooth ect.), less cpu usage and other such niceties.

(Also is that you on the toilet?)