Issue in Chrome with Bootstrap 3 columns when using Jquery Isotope (but fine in Safari!)

I have spent days trying to solve this and I'm at my wits' end. If anyone has any insight, I would be very, very grateful.

I am working on a site and using both Bootstrap 3 and Jquery Isotope. I am using Bootstrap 3's grid to arrange divs in four columns. Everything is fine until I apply the Isotope filter to the divs. After doing that, in Chrome, it becomes a three column layout with a huge gap on the right side. It appears as though the divs stay the same width—they just break after three instead of four. The maddening thing is, everything seems to work fine in Safari!

Here is an illustration of the difference. Safari (correct): Safari

Chrome (incorrect): Chrome

I have tried everything, and the only "solution" I have found is to change the padding-left and padding-right on the .container div containing the Isotope elements to 0. I don't want to do this, however, because then other Isotope-containing .container divs won't line up properly.

I would really, really appreciate any help you could give! I really can't figure this one out… I have created a basic Jsfiddle to illustrate:

http://jsfiddle.net/kECqL/5/

Here is the basic html:

<div class="container">
    <div class="row iso">
        <div class="col-sm-3 iso-item" style="padding-bottom: 20px;">
            <div style="background-color: green;">
                <p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. </p>
            </div>
        </div>
    </div>
</div>

Here is the Isotope script:

<script type="text/javascript">
var $container = $('.iso');

$container.imagesLoaded( function(){
  $container.isotope({
    // options...
    itemSelector : '.iso-item',
    layoutMode : 'masonry'
  });
});

</script>

Recommended topics

Hot tags