Javascript 这种布局表现得很奇怪

我想用同位素v2做一个fitRows网格。 单个网格项的宽度百分比为50%，因此它可以很好地适应屏幕大小，从而使其响应速度更快。 布局很好，但当我过滤它或手动调整窗口宽度时，单个网格元素会奇怪地移动。特别是外部的右翼势力先向右移动，然后又回来。 有没有关于如何解决这个问题的建议

更新： 在Chrome和Firefox上，它似乎工作得很好，而在Safari上，它就坏了。我无法在Internet Explorer上进行测试

完整代码已打开

HTML

Javascript

$(document).ready(function () {    

    // ----- GRIDS -----    

    // init Isotope
    // for projects and teching
    var $container = $('.grid').isotope({
        itemSelector: '.grid-item',
        layoutMode: 'fitRows',
        percentPosition: true,
        fitRows: {
            columnWidth: '.grid-sizer'
        }
    });    

    // bind grids filter button click
    $('#filters').on('click', 'button', function () {
        var filterValue = $(this).attr('data-filter');
        // use filterFn if matches value
        $container.isotope({
            filter: function () {
                if (filterValue == "*") return true;
                // _this_ is the item element
                var categories = $(this).attr('data-category').split(" ");
                return categories.indexOf(filterValue) != -1;
            }
        });
    });    

    // change is-checked class on filter buttons
    $('.button-group').each(function (i, buttonGroup) {
        var $buttonGroup = $(buttonGroup);
        $buttonGroup.on('click', 'button', function () {
            $buttonGroup.find('.is-checked').removeClass('is-checked');
            $(this).addClass('is-checked');
        });
    });    

});

---

此问题是否特定于浏览器？在群组之间切换或重新调整窗口大小时，我使用chrome和fiddle似乎很好？是的，在chrome和Firefox上看起来不错，在Safari上似乎坏了。

*, *:before, *:after {
    margin: 0;
    padding: 0;
    border: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.grid:after {
    content:'';
    display: block;
    clear: both;
}
.grid-item {
    width: 50%;
    height: 320px;
    padding: 10px;
    border: 1px solid black;
}
.button {
    display: inline-block;
    padding: 0.3em 1.0em 0.3em 1.0em;
    background-color: lightgrey;
}
.button:hover {
    background-color: lightblue;
}
.button:active, .button.is-checked {
    background-color: blue;
}
.button.is-checked {
    color: white;
}

$(document).ready(function () {    

    // ----- GRIDS -----    

    // init Isotope
    // for projects and teching
    var $container = $('.grid').isotope({
        itemSelector: '.grid-item',
        layoutMode: 'fitRows',
        percentPosition: true,
        fitRows: {
            columnWidth: '.grid-sizer'
        }
    });    

    // bind grids filter button click
    $('#filters').on('click', 'button', function () {
        var filterValue = $(this).attr('data-filter');
        // use filterFn if matches value
        $container.isotope({
            filter: function () {
                if (filterValue == "*") return true;
                // _this_ is the item element
                var categories = $(this).attr('data-category').split(" ");
                return categories.indexOf(filterValue) != -1;
            }
        });
    });    

    // change is-checked class on filter buttons
    $('.button-group').each(function (i, buttonGroup) {
        var $buttonGroup = $(buttonGroup);
        $buttonGroup.on('click', 'button', function () {
            $buttonGroup.find('.is-checked').removeClass('is-checked');
            $(this).addClass('is-checked');
        });
    });    

});