Javascript MixItUp Chrome bug-元素在过渡期间四处飞舞

我是新来的，非常感谢你能给我的帮助

我正在使用MixItUp插件创建一个图库。我已经设置了一些占位符，并且我已经在Firefox上进行了良好的过滤。然而，在chrome上，这些物品似乎在过渡期间四处飞舞，然后迅速就位

这是密码笔：

HTML

<div class="container">
  <div class="controls">
    <button class="filter" data-filter=".photo">Photo</button>
    <button class="filter" data-filter=".art">Art</button>
    <button class="filter" data-filter="all">All</button>
  </div>

  <div class="gallery">
    <div class="mix photo">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/3.jpg">
    </div>
    <div class="mix art">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/4.jpg">
    </div>
    <div class="mix photo">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/6.jpg">
    </div>
    <div class="mix art">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/8.jpg">
    </div>
  </div>
</div>

JS

.container .controls {
  text-align: center
}

.container .gallery {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 3px;
  -moz-column-gap: 3px;
  column-gap: 3px;
  width: 100%
}

.container .gallery .mix img {
  width: 100%;
}

$('.gallery').mixItUp({
  animation: {
    duration: 350,
    effects: 'fade translateY(40px)',
    easing: 'ease',
  }
});

依赖项是jQuery和mixitup.js

---

我对JS不是很在行，我想这是我第一次使用MixItUp，所以请原谅我错过的任何明显的东西。

请编辑您的问题，以便包括一个。添加了代码和到codepen的链接。谢谢：）