JavaScript code not responding to CSS change by media query

Question

I have a javascript function that is called when the user resizes the window and that does different things depending on whether a CSS media query (max-width) is true. In order to do that, I have a div that is made visible when the media query is triggered. The javascript code then checks the div's visibility (inside the resize event). This works great in Chrome and Firefox, but is giving me minor issues in Safari (7.0.5). If the window is resized and is around the width at which the condition is triggered, the js code is sometimes out of sync with the CSS: when I inspect the div I can see that it's showing (meaning the media query is working correctly), but the js conditional that checks visibility still returns false. The code is pretty simple:

JQuery:

if ($("#is-mobile").css("display") === "none") {
        $("#site-nav").show();
    } else {
        $("#site-nav").hide();
    }

CSS:

#is-mobile {
    width: 0;
    height: 0;
    display: none;
}

@media screen and (max-width: 500px) {
    #is-mobile {
        display: block;
    }
}

This mismatch only happens if the CSS width of the window is roughly between 485px and 499px. That makes me thing it's related to the ~15-20px mismatch between $(window).width() and the CSS viewport width that can occur when a vertical scrollbar is visible (see e.g. here). I do have a vertical scrollbar in my window so I wonder if that's what is causing the issues. Ironically, that scrollbar weirdness is why I'm checking the visibility of the div instead of using $(window).width() in the first place!

EDIT: just tested this code in an otherwise empty html (so no vertical scrollbar), and the problem is indeed gone. So must be related to the scrollbar.