MixItUp Chrome bug - Elements flying around during transition

Question

I'm super new here and really appreciate any help I can get with this.

I'm using the MixItUp plugin to create a gallery. I've set it up with some placeholders, and I've got the filtering to work fine on Firefox. On chrome, however, the items seem to be flying around during the transition and then snapping into place.

Here's the codepen: http://codepen.io/nvenk/pen/Bpzqqv

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>

CSS

.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%;
}

JS

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

Dependencies are jQuery and mixitup.js.

I'm not great at JS, and I this is the first time I'm using MixItUp, so please forgive any obvious things I missed.