javascript - jQuery Masonryが特定の幅でランダムに壊れる

Question

jQuery Masonry を使用してレスポンシブな写真グリッドを開発しています。私は単純な CSS プロポーショナル グリッドを使用していますが、すべて正常に動作します (フロートが垂直方向に機能しないという事実を除いて)。石積みを追加した瞬間、このレイアウトが壊れます。

$(document).ready(function() {

    // select container
    var $work   = $(".work");

    // set columns based on window width
    var columns = 3,
        setColumns = function() { columns = $(window).width() > 768 ? 3 : 2; };

    $work.imagesLoaded(function() {
        $work.masonry({
            itemSelector: '.project',
            columnWidth: function(containerWidth) {
                return containerWidth / columns;
            }
        });

        $(window).on('resize', function() {
                    // set columns now that the browser width is different.
            setColumns();
            $work.masonry('reload');
        }).resize();
    });
});

この問題を示す jsfiddle は、ここにあります。

768px のブレークポイントより上では (多くのちらつきがありますが) 動作しますが、ブレークポイントより下では、2 つの列であるべきものが 1 つにしか収まりません。

私が試した修正：

• columnWidth を 1 に設定すると、Safari と Firefox では修正されますが、Chrome では修正されません。
• 列の 1 つの幅を 49% ではなく 47.5% (2% のマージンを占める) に設定しても、グリッドが視覚的に整列しません。

幅とマージンが少しオーバーしていることに関係しているのではないかと思いますが、コードを徹底的にチェックしたところ、数値は 100% の幅になるはずです。それが壊れるのは、メーソンリーが入ってきたときだけです。

考え？どんな助けでも大歓迎です。