jQuery столбцы равной высоты - столбец периодически выходит за пределы DOM

Мой упрощенный код выглядит примерно так:

<div class="equal clearfix">
    <section class="secondary column clearfix">
    </section>
    <section class="primary column clearfix">
        <div id="map_canvas" style="width:520px; height:350px;" class="google-map"></div>

        <div>
            <a href="#" class="overlayed-link">link</a>
            <img src="/images/image.jpg" class="image" />
        </div>
         <div>
            <a href="#" class="overlayed-link">link</a>
            <img src="/images/image2.jpg" class="image" />
        </div>
    </section>
</div><!-- /.equal -->
<footer>Blah</footer>

Затем у меня есть JavaScript/jQuery:

$( document ).ready( function() {
    $('.equal').each(function(){  
        var highestBox = 0;
        $('.column', this).each(function(){
            if($(this).height() > highestBox) 
               highestBox = $(this).height(); 
        });  
        $('.column',this).height(highestBox);
    }); 
}); 

Все это прекрасно работает. Но потом SOMETIMES, и только иногда... и только в Google Chrome эта первичная колонка, та, что с изображениями в ней, пробивает нижний колонтитул.

Когда я проверил в собственных инструментах разработчика Chrome, я вижу, что это не столбец, пробивающий нижний колонтитул, а только изображение. Столбцы фактически устанавливаются на равные высоты, как и должно быть (это просто неправильная высота). И нижний колонтитул находится внизу DOM, где и должно быть. Технически все на месте, но окончательное изображение в этом столбце находится ниже всего в DOM, включая закрывающий тег HTML.

Я предполагаю, что это должна быть проблема JavaScript, но ошибок нет. Кто-нибудь сталкивался с этим раньше?

Это кажется совершенно случайным, но чаще всего это происходит при открытии новой вкладки в браузере и загрузке страницы. Также стоит отметить, что в нем есть карта Google, как показано в коде.