Question

在荣誉榜部分，当我在Chrome / Safari中查看下一组图像时，图像似乎被切断，直到我将鼠标悬停在它们上面。但在Firefox上，它运行正常！

Webkit中可能导致此类行为的原因是什么？

Answer 1

这是一个真正的bono-fide webkit bug。不是你的错，你的代码是正确的，这里的责任在于webkit的渲染实现。幸运的是有一个修复！

目前，您正在设置margin-left #list_wrapper属性的动画，这就是造成这种情况的原因。因此，有一个简单的工作和更好的解决方法。

轻松！

使用css将#list_wrapper设置为position:relative，然后为left属性设置动画，而不是left-margin。（实际上margin-left仍然有效，但不太好，所以你可以使用position:relative来解决这个问题）

这里的缺点是它对浏览器效率不高（边缘左边的动画也非常糟糕）

<强>更好的<！/强>

将#list_visible设置为position:relative并适当设置其高度（否则默认为零，您的列表将消失）。然后将#list_wrapper设置为position:absolute并使用left属性设置动画。

这里的优势在于，因为我们正在设置一个position:absolute对象的动画，所以它不需要在每个动画帧上重写整个文档，从而使动画效率更高！

<强> BESTER！

如果您想了解它，可以查看css3过渡并使用transform来移动幻灯片。这将导致html5人的高五，以及尽可能的硬件加速，（iPad动画将顺利等），更少的CPU使用和其他这样的细节。

（也是你上厕所了吗？）

Answer 2

应该通过清除封闭的ul来修复，请参阅http://www.webtoolkit.info/css-clearfix.html

<div class="photoList">
  <ul class="clearfix">
  <li></li>
  </ul>
</div>

jQuery动画在Webkit浏览器中切割图像，而不是Firefox

2 个答案: