在 Safari 中查看时粘性菜单显示错误

Question

我有一个使用 Genesis 主题建立在 Wordpress 上的网站，HERE。我最近实现了 "Sticky Menu." 菜单在 Chrome、Opera 和 Firefox 中运行良好，但在 Safari 中有一个奇怪的图形问题。向下滚动后，屏幕左侧的 Safari "flies in" 菜单会停留在适当的位置。它不会在向上滚动时执行此操作，只会向下滚动。

我浏览了几个论坛等试图找到解决方案。看来这个问题可以在我的 JS 中解决，切换 'window' 和 'document'；然而，这在这种情况下不起作用。

这是我的 JS，为了好玩：

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

在另一个论坛上找到了这个问题的答案。问题在于 Safari 如何呈现我的过渡 CSS。删除了以下内容并且一切正常：

-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;

在 Safari 中查看时粘性菜单显示错误

Sticky Menu Display Error When Viewing in Safari

javascript

menu

safari

sticky

genesis