Height issue in Chrome with jquery Isotope in responsive layout with Bootstrap 3

Question

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 https://github.com/cubica/isotope-sloppy-masonry - 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.

My problem: In Chrome there is a problem that the thumbnail height gets wrong, much too small and contents gets cut off. (note that the issue is there unregarded of my resizeboxes() function.)

The (un)funny thing is it doesn't happen every time. Also when I resize the Chrome window, the layout gets right...

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!

Here is my current (slightly simplified) code:

<div class="row" id="listing">
    <?php foreach ($products as $p): ?>
    <div class="col-md-3 list">
        <img src="<?=$p->image_file?>" class="img-responsive" />
        <h4><?=$p->title?></h4>
    </div>
    <?php endforeach; ?>   
 </div> 

JS function to make equal heights:

function resizeBoxes()
{
    var h = 0;
    $('div.view').each(function() 
    {
        var b = $(this);
        if (h < b.height()) h = b.height();
    });     
    $('div.view').height(h);
}   

And init isotope function:

var $container = $('#listing');
function initIsotope()
{
     $container.isotope({
          layoutMode: 'sloppyMasonry',
     });
}

$(window).resize(function() {
    resizeBoxes();  
    initIsotope();
});
$(document).ready(function() {
    resizeBoxes();
    initIsotope();
});

Answer 1

Even though I read this post before, the answer could be found here: Can't get Isotope working with Bootstrap 3 .thumbnail

Problem was that when images is not loaded, and since responsive images can't have width/height values set, either Isotope nor my equal height function could correctly set the image height. So solution was simple, just setting Isotope to init on load instead:

$(window).load(function() {
    resizeBoxes();
    initIsotope();
    $('#listing').animate({opacity: 1.0}, 200);
});

I added a fadein to avoid flickering before load had finished.

Answer 2

the imagesLoaded plugin should totally work (even though it has been removed from Isotope v2), I personally have solved it like this:

var myGrid = $('.grid');

myGrid.imagesLoaded(function(){
    myGrid.isotope();
});

But I also loved how this plugin solved the issue internally: http://goo.gl/sQ6yXj and it is using Isotope v2 which is very awesome