Где может быть ошибка в скрипте?

Добрый день! На странице есть ссылки, расположенные в одну строку. Этот скрипт прячет ссылки, которые при ресайзе выходят за пределы экрана, в отдельный блок.

$(document).ready(function() {
var $nav = $('.h__i');
var $btn = $('.h__i button');
var $vlinks = $('.h__i .visible-links');
var $hlinks = $('.h__i .hidden-links');
var breaks = [];
function updateNav() {
var availableSpace = $btn.hasClass('hidden') ? $nav.width() : $nav.width() - $btn.width() - 30;
    if($vlinks.width() > availableSpace) {
        breaks.push($vlinks.width());
        $vlinks.children().last().prependTo($hlinks);
    if($btn.hasClass('hidden')) {
        $btn.removeClass('hidden');
    }
    } else {
    if(availableSpace > breaks[breaks.length-1]) {
        $hlinks.children().first().appendTo($vlinks);
        breaks.pop();
    }
    if(breaks.length < 1) {
        $btn.addClass('hidden');
        $hlinks.addClass('hidden');
    }
    }
        $btn.attr("count", breaks.length);
    if($vlinks.width() > availableSpace) {
        updateNav();
    }
}
$(window).resize(function() {
    updateNav();
});
$btn.on('click', function() {
    $hlinks.toggleClass('hidden');
});
    updateNav();
});

Есть одна странная особенность. В стиле указано для блоков:

.h__i .visible-links {
    display: table;
}
.h__i .visible-links li {
    display: table-cell;
}

Если вместо table указать block:

.h__i .visible-links {
    display: block;
}
.h__i .visible-links li {
    display: inline-block;
}

то при открытии страницы в более старых браузерах, браузер начинает эту страницу грузить очень и очень долго, и в итоге по окончании загрузки все ссылки становятся невидимыми (даже те, которые попадают в экран), а на счетчике количество спрятанных ссылок становится цифра в несколько десятков тысяч. Подскажите, пожалуйста, где кроется ошибка? И, пожалуйста, проверьте скрипт в целом на ошибки. Огромно вас благодарю!