新 chrome 和 opera 版本中的闪烁问题答案

【问题标题】：Blinking issue in new chrome and opera versions新 chrome 和 opera 版本中的闪烁问题
【发布时间】：2016-02-12 19:32:07
【问题描述】：

浏览器更新后，我在 chrome 和 opera 中闪烁时遇到奇怪的问题。我的网站是由 div 组成的，这些 div 相互重叠。在此重叠期间，重叠的 div 会变得模糊。为此，我使用了 2 个函数。

     (function ($) {
        /* Store the original positions */
        var d1 = $('.one');
        var d1orgtop = d1.position().top;
        var d2 = $('.two');
        var d2orgtop = d2.position().top;


        /* respond to the scroll event */
        $(window).scroll(function () {
          /* get the current scroll position */
          var st = $(window).scrollTop();

          /* change classes based on section positions */
          if (st >= d1orgtop) {
            d1.addClass('latched');
          } else {
            d1.removeClass('latched');
          }
          if (st >= d2orgtop) {
            d2.addClass('latched');
            topbar_open();
          } else {
            d2.removeClass('latched');
          }


        });

      })(window.jQuery);


$(document).scroll(function () {
       var scrollTop = $(this).scrollTop();
        var pixels = scrollTop / 100;

        if (scrollTop < height) {
            $(".one").css({
                "-webkit-filter": "blur(" + pixels + "px)",
                "filter": "blur(" + pixels + "px)",
                "background-position": "center -" + pixels * 10 + "px"

            });

        }
}

当然 css 类“锁定”将位置更改为固定。

好的，所以我的问题是当我将视频放在一个 div 中时，这个 div 会闪烁。这发生在 chrome 更新后。我发现眨眼与模糊有关。有什么想法可以帮助我解决这个问题吗？在上次 chrome 和 opera 更新之前一切正常。

【问题讨论】：

闪烁问题是因为您每次滚动时都在检查，然后根据该滚动执行某些操作。更改条件语句以在执行功能之前检查“锁定”类以及滚动高度。这样就发生了变化，除非两个条件都满足，否则它不会变回来。这应该可以解决您的眨眼问题。
我不明白。可以再解释一下吗？你的意思是我必须在“scroll”函数的“if”中添加检查“latched”类的条件吗？

标签： javascript jquery html css google-chrome

【解决方案1】：

将您的条件句更改为这样的内容。您当前正在执行的操作会强制浏览器每次都重新开始，然后重新应用导致闪烁的类。添加第二个条件意味着除非两个条件都满足，否则浏览器不会执行任何操作。

// Make sure that we've scrolled past the threshold and the latched class isn't already present.
if (st >= d1orgtop && ( !jQuery(".one").hasClass( "latched" ))) {

    // Add latched class 
    d1.addclass("latched");

// Check to see if we haven't scrolled past the threshold and if the latched class present.
} else if (st <= d1orgtop && ( jQuery(.one).hasClass( "latched" ))) {

    // Remove latched class
    d1.removeClass("latched");
}

然后将你的模糊附加到你的数字类，并让锁定类成为非模糊类。

或者，您可以通过延迟过渡发生之前的时间，通过 CSS 实现类似的效果。不过，如果可行的话，这有点冒险。

.latched {
    -webkit-transition-delay: .5s;
    transition-delay: .5s;
}

【讨论】：