Setting Visibility to hidden is too slow

I have an element that I want to hide by setting the css property "visibility" to "hidden" when a flex div overflows. My code does what I want, except there is about a 1 second or so delay before the element is hidden. Here is my code:

function toggle_nav() {    
    if (window.first_li.offsetTop !== window.google_search.offsetTop) {
        window.element_to_hide.style.visibility = 'hidden';
    } else {
        window.element_to_hide.style.visibility = 'visible';
    }
}


$(document).ready(function() {
    window.element_to_hide = document.getElementById("user_dependant");
    window.google_search = document.getElementById("search-box-container");
    window.first_li = document.getElementById("main_nav").children[0].children[0];
    console.log(window.first_li);
    toggle_nav();
});
$(window).resize(function() {
    toggle_nav();
});

I have tried adding a delay to the resize event, but that makes the issue worse. By adding a breakpoint I can see that the issue is that setting the visibility style to hidden is what is causing the delay.

Any suggestions?