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

有问题的网站是http://bit.ly/7MeLwc jQuery的动画切割的Webkit浏览器的图像，而不是Firefox的

在光荣榜节，当我观看下集在Chrome/Safari浏览器的图像，图像似乎被切割，直到我将它们放在它们上面但在Firefox上，它工作正常！

什么可能导致这种行为在Webkit中？

2012-07-11 Gaurav Dadhania

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

当前您正在动画margin-left#list_wrapper的属性，这是造成印章的原因。所以有一个简单的解决方法和更好的解决方法。

容易！

设置#list_wrapper到position:relative用CSS，然后动画left属性而不是left-margin。（实际上保证金余额仍然有效，但不是很好，所以你可以只使用position:relative来解决这个问题）

这里的缺点是它对浏览器不是很有效率（边距左边的动画也很糟糕）

更好！

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

这里的好处是，因为我们动画的对象是position:absolute，所以它不需要每个动画帧上的整个文档的回流，从而获得更高效的动画！

BESTER！

如果您想使用它，可以查看css3转换并使用transform来移动幻灯片。这将导致html5人高五位，并且在可能的情况下也会有硬件加速，（iPad动画将会流畅），更少的CPU使用率以及其他细微差别。

（也是你上厕所吗？）

来源

2012-07-11 00:47:58 Fresheyeball

太棒了！欢呼的详细答案！ – 2012-07-11 14:50:54

P.S .:那不是我，那是@SimonGriffiths。我是网站的人。 :) – 2012-07-11 14:51:58

应该由clearfixing封闭UL是固定的，看到http://www.webtoolkit.info/css-clearfix.html

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

来源

2012-07-11 00:26:37 Duopixel

我添加了一个clearfix类，它增加了一个“clear：both;”样式到节点。虽然没有帮助？ – 2012-07-11 00:34:16

问题是webkit认为'＃photolist'是0px高，因为所有的li都是浮动的。如果你认为clearfix是一种矫枉过正的做法，只需在'ul'中添加'overflow：auto'，它就可以工作（但如果内容不合适你可能会得到srollbars）。 – Duopixel 2012-07-11 01:00:29

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

回答

相关问题