Chrome: jQuery Height not Setting on First Load

Chrome: jQuery Height not Setting on First Load

I've encountered a strange error ONLY in Chrome where height will not
properly set on load when being set via jQuery. The height will set find
on load when the browser is refreshed, but when you open a new tab or
first navigate to the page, the height is not properly set:
wrong:
right:
Here is my code:
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();
});
Upon further investigation, I find that the function has been executed,
but that each box has been set to have a height of 9px, which seems to
indicate that an animation may be responsible for this. But when I remove
all animations, I still get the same result...
How do I fix this?