Edit in JSFiddle

// http://packery.metafizzy.co/packery.pkgd.js added as external resource

docReady( function() {
  var container = document.querySelector('.packery');
  var pckry = new Packery( container );
  
  eventie.bind( container, 'click', function( event ) {
    // don't proceed if item content was not clicked on
    var target = event.target;
    if ( !classie.has( target, 'item-content' )  ) {
      return;
    }
    var itemElem = target.parentNode;
    var isExpanded = classie.has( itemElem, 'is-expanded' );
    classie.toggleClass( itemElem, 'is-expanded' );
  
    if ( isExpanded ) {
      // if shrinking, just layout
      pckry.layout();
    } else {
      // if expanding, fit it
      pckry.fit( itemElem );
    }
  });
});

<h1>Packery - resize item "flashing" bug in iOS</h1>
<p class="instruction">View on iOS, and see "flashing" issue when item is toggled.</p>
<div class="packery">
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
</div>

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body { font-family: sans-serif; }

.packery {
  background: #FDD;
  background: hsla(45, 100%, 40%, 0.2);
  max-width: 520px;
}

/* clearfix */
.packery:after {
  content: ' ';
  display: block;
  clear: both;
}

.item,
.item-content {
  width: 60px;
  height: 60px;
}

.item-content {
  width: 60px;
  height: 60px;
  background: #09D;
  border: 4px solid #333;
  border-color: hsla(0, 0%, 100%, 0.4);
  -webkit-transition: width 0.4s, height 0.4s;
     -moz-transition: width 0.4s, height 0.4s;
       -o-transition: width 0.4s, height 0.4s;
          transition: width 0.4s, height 0.4s;
}

/* both item and item content change size */
.item.is-expanded,
.item.is-expanded .item-content {
  width: 180px;
  height: 120px;
}

.item:hover { cursor: pointer; }

.item:hover .item-content {
  border-color: white;
}

.item.is-expanded {
  z-index: 2;
}

.item.is-expanded .item-content {
  background: #C90;
}