javascript - 单击链接后，Bootstrap navi 会因滚动而闪烁

Question

我有一个固定到顶部的导航。我有这个来自 Bootstrap 3 的导航。在我的页面上，我有几个链接，其中有一个 svg 图像。通过将鼠标悬停在链接上，它开始上下移动。当我单击这些链接时，我的页面会平滑地向下滚动到特定位置。但是，当我单击这些链接后尝试向下或向上滚动时，我的导航开始在 Chrome 中闪烁。但是当我用鼠标单击页面上的任意位置时，它就会停止闪烁。

可能是什么问题或者如何模拟页面上任意位置的鼠标单击？

我尝试过:

$('body').click();

但现在它确实起作用了。

这是我的网站: http://mival.de/examples/mival/index.html

当您点击黑色箭头并在 Chrome 中滚动页面后，导航开始闪烁。

JS滚动

//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
    if ($(".navbar").offset().top > 50) {
        $(".navbar-fixed-top").addClass("top-nav-collapse");
    } else {
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
    }
});

//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
        setTimeout(function() {
            $('#homeSection').click();
        }, 500);
    });

});

Answer 1

好的，找到解决方案了。刚刚将以下内容添加到我的 arrow:hover 类中:

 -webkit-perspective: 1000;
 -webkit-backface-visibility: hidden;

不太清楚它的作用，但它确实有效!

P.S.:除此之外，我将translateY规则的度量从em更改为px。