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?
这是一个真正的真正的 webkit 错误。不是你的错，你的代码是正确的，这里的责任在于 webkit 的渲染实现。幸运的是有一个修复！
目前，您正在为 的margin-left属性设置动画#list_wrapper，这就是造成斩波的原因。所以有一个简单的解决方法和一个更好的解决方法。
简单的！
使用 css设置#list_wrapper为position:relative，然后为left属性设置动画，而不是left-margin. （实际上margin-left 仍然可以工作，但不是那么好，所以你可以用它position:relative来解决这个问题）
这里的缺点是它对浏览器不是很有效（左边距动画也很糟糕）
更好的！
设置#list_visible为position:relative并适当地设置它的高度（否则它将默认为零并且您的列表将消失）。然后设置#list_wrapperto并使用该属性position:absolute设置动画。left
这里的优点是，因为我们正在为一个对象设置动画position:absolute，所以它不需要在每个动画帧上重排整个文档，从而实现更高效的动画！
最好！
如果您想对它感兴趣，可以查看 css3 过渡并使用transformto 来移动幻灯片。这将导致来自 html5 的人的击掌，并且在可能的情况下还具有硬件加速（iPad 动画将是流畅的等），更少的 cpu 使用率和其他类似的细节。
（也是你上厕所吗？）
它应该通过清除封闭的 ul 来修复，请参阅http://www.webtoolkit.info/css-clearfix.html
<div class="photoList">
<ul class="clearfix">
<li></li>
</ul>
</div>