title: Height issue in Chrome with jquery Isotope in responsive layout with Bootstrap 3
body: <p>I'm using the Isotope plugin to filter my product listing. I also use Bootstrap 3 for the general layout, the page should be responsive so the column widths are percentage-based. I want equal height thumbnail images and equal width, a simple grid. First I tried with "fitRows" layout mode but I had a problem with wrong numbers of columns showing (in all browsers) and found the extra layout behaviour "Sloppy Masonry" posted by Cubica at <a href="https://github.com/cubica/isotope-sloppy-masonry" rel="noreferrer">https://github.com/cubica/isotope-sloppy-masonry</a> - this fixed the problem with column widths when having a responsive grid. To solve equal heights I did a simple JS to set all heights to adapt to the highest item.</p>
  
  <p><strong>My problem: In Chrome there is a problem that the thumbnail height gets wrong, much too small and contents gets cut off.</strong> (note that the issue is there unregarded of my <code>resizeboxes()</code> function.)</p>
  
  <p>The (un)funny thing is it doesn't happen every time. Also when I resize the Chrome window, the layout gets right...</p>
  
  <p>I read that Isotope v2 (now beta) would handle responsive layouts better but I couldn't make it work better. Now I have tried many different tricks but I can't get it as I want. The current code works in all major browsers except Chrome... Help appreciated!</p>
  
  <p>Here is my current (slightly simplified) code:</p>
  
  <pre><code>&lt;div class="row" id="listing"&gt;
      &lt;?php foreach ($products as $p): ?&gt;
      &lt;div class="col-md-3 list"&gt;
          &lt;img src="&lt;?=$p-&gt;image_file?&gt;" class="img-responsive" /&gt;
          &lt;h4&gt;&lt;?=$p-&gt;title?&gt;&lt;/h4&gt;
      &lt;/div&gt;
      &lt;?php endforeach; ?&gt;   
   &lt;/div&gt; 
  </code></pre>
  
  <p>JS function to make equal heights:</p>
  
  <pre><code>function resizeBoxes()
  {
      var h = 0;
      $('div.view').each(function() 
      {
          var b = $(this);
          if (h &lt; b.height()) h = b.height();
      });     
      $('div.view').height(h);
  }   
  </code></pre>
  
  <p>And init isotope function:</p>
  
  <pre><code>var $container = $('#listing');
  function initIsotope()
  {
       $container.isotope({
            layoutMode: 'sloppyMasonry',
       });
  }
  
  $(window).resize(function() {
      resizeBoxes();  
      initIsotope();
  });
  $(document).ready(function() {
      resizeBoxes();
      initIsotope();
  });
  </code></pre>