jQuery 和 masonry()：动画对象在 Chrome 中闪烁答案

【问题标题】：jQuery and masonry(): animated objects flickering in ChromejQuery 和 masonry()：动画对象在 Chrome 中闪烁
【发布时间】：2013-08-25 13:17:45
【问题描述】：

我正在通过.ajax() 在页面上加载几个<li> 元素并将它们堆叠在一起。然后用户可以

拖动各个元素
点击“pile”重建堆栈
单击“传播”以使用jquery.masonry() 传播元素

问题出现在最后一个选项中：当展开项目时，元素按应有的方式移动到网格中的指定位置，然后闪烁片刻回到原来的位置。

在此处观看视频：Video (Quicktime .mov)
在此处观看现场演示：Live Demo

这个问题只发生在大约 50% 的时间里，而不是每次我传播项目时。例如，在上面的视频中，它只发生在我点击“传播”的第二次也是最后一次。我无法说出究竟是什么导致了这个错误的发生。该问题出现在 Mac 上的 Chrome 29.0.1547.57 中。 Firefox 22 和 Safari 6.0.5 不受影响。我还没有尝试过其他浏览器。

点击展开链接时，.masonry() 会这样调用：

    $('.content').masonry({
        columnWidth: 180,
        gutter: 20,
        itemSelector: 'li',
        isResizeBound: false,
        isLayoutInstant: false
    });

感谢有关如何解决此问题的提示。

更新：我注意到这个问题也出现在其他使用 jquery.masonry 的网站上，例如插件的网站本身。在此处观看视频：Video。其他人是否有同样的问题，或者这是我的设置（OS X 10.7.5，Chrome 29.0.1547.57）？

【问题讨论】：

在我最近升级到 Masonry v3.1.2 和 Chrome 之后，我也发现了这一点。它们滑入原位，然后滑出原位（离开页面的左侧和右侧），然后又回到原位。我根本没有设置任何选项 - 只是在每个项目上使用 CSS 百分比宽度。如果我设置了 transitionDuration: 0 我发现这些项目只是卡在了错误的地方。

标签： javascript jquery google-chrome jquery-masonry

【解决方案1】：

我有同样的问题。这是由于grid-item 样式上的CSS 转换引起的。 删除特定 DOM 元素的 CSS3 过渡解决了我的问题。

【讨论】：

这实际上帮助了我的问题。谢谢

【解决方案2】：

我只是在搜索同样的问题时发现了这个。我开始怀疑这是我的显示器还是电缆。

我使用的是 Windows 8 和 Chrome 版本 30.0.1599.101 m

【讨论】：