jquery - Chrome: jQuery の高さが最初の読み込み時に設定されない

Question

jQuery経由で設定されている場合、ロード時に高さが適切に設定されないという奇妙なエラーがChromeでのみ発生しました。高さは、ブラウザーが更新されると読み込み時に設定されますが、新しいタブを開くか、最初にページに移動すると、高さが正しく設定されません。

間違っています:

右：

これが私のコードです：

jQuery(document).ready(function ($) {
    var $grid = $(".tile-grid"),
        $homeGrid = $(".home"),
        $boxes = $grid.find("section"),
        $window = $(window);

    function resizeBoxes() {
        var boxWidth = $boxes.first().not(".active").outerWidth();
        $boxes.css("height", boxWidth);
    }

    function main() {
        $window.on("resize", function() {
            resizeBoxes();
        });
        resizeBoxes();
    }
    main();
});

さらに調査すると、関数は実行されていることがわかりましたが、各ボックスの高さが に設定されています9px。これは、アニメーションが原因である可能性があることを示しているようです。しかし、すべてのアニメーションを削除しても、同じ結果が得られます...

これを修正するにはどうすればよいですか?