在 Safari 中查看时粘滞菜单显示错误答案

【问题标题】：Sticky Menu Display Error When Viewing in Safari在 Safari 中查看时粘滞菜单显示错误
【发布时间】：2015-05-21 19:58:44
【问题描述】：

我有一个使用 Genesis 主题在 Wordpress 上构建的网站，HERE。我最近实施了一个“粘性菜单”。该菜单在 Chrome、Opera 和 Firefox 中运行良好，但在 Safari 中存在奇怪的图形问题。向下滚动时，Safari 中的菜单会从屏幕左侧“飞入”，然后停留在适当的位置。它不会在向上滚动时执行此操作，只会向下滚动。

我浏览了几个论坛，并试图找到解决方案。看来这个问题可以在我的 JS 中解决，切换“窗口”和“文档”；然而，在这种情况下这不起作用。

这是我的 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();
        }
    });
}

});

【问题讨论】：

标签： javascript menu safari sticky genesis

【解决方案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;

【讨论】：