CSS列奇怪行为（抵消项目）

Question

我正在显示一些高度略有变化的瓷砖，见下图，我认为我已经解决了这个问题，而不使用css列使用砖石。

瓦片：

我的代码是：

-moz-column-count: 2;
-moz-column-gap: 4px;
-webkit-column-count: 2;
-webkit-column-gap: 4px;
column-count: 2;
column-gap: 4px;

每个磁贴都有一个运行函数的ng-click - 将运动对象传递给函数。

列CSS将图块偏移一个。例如，如果我点击Tip Toe Line Walking - 它实际上传递了Side Step Across Beam的对象 - 它们都在网格中偏移了1个位置。

如果我运行正常的CSS，那么它的功能就完美了。为什么列css正确显示但传递不正确的变量？

EDIT 这在iPad上的Safari中运行良好。