Question

我使用Genesis主题HERE在Wordpress上构建了一个网站。我最近实施了一个“粘滞菜单”。该菜单在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();
        }
    });
}

});

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中查看时粘滞菜单显示错误

1 个答案: