Sticky Menu Display Error When Viewing in Safari

Question

I have a site built on Wordpress using a Genesis theme, HERE. I recently implemented a "Sticky Menu." The menu works great in Chrome, Opera and Firefox, but has a weird graphical issue in Safari. Upon scrolling down, the menu in Safari "flies in" from the left hand side of the screen before sticking in the appropriate place. It does not do this on scrolling up, only down.

I've browsed several forums and such trying to find solutions. It seems that the issue could be resolved in my JS, switching 'window' and 'document'; that has not worked in this case however.

Here is my JS, for kicks:

jQuery(document).ready(function($) {
var $filter = $('.nav-primary');
var $filterSpacer = $('<div />', {
    "class": "filter-drop-spacer",
    "height": $filter.outerHeight()
});


if ($filter.size())
{
    $(window).scroll(function ()
    {
        if (!$filter.hasClass('fix') && $(window).scrollTop() > $filter.offset().top && window.innerWidth > 768)
        {
            $filter.before($filterSpacer);
            $filter.addClass("fix");
        }
        else if ($filter.hasClass('fix')  && $(window).scrollTop() < $filterSpacer.offset().top)
        {
            $filter.removeClass("fix");
            $filterSpacer.remove();
        }
    });
}

});

Answer 1

Found the answer to this on another forum. Issue was with how Safari was rendering my transition CSS. Removed the following and all worked well:

-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out;