javascript - 新 chrome 和 opera 版本中的闪烁问题

Question

浏览器更新后，我在 chrome 和 opera 中遇到闪烁的奇怪问题。我的网站是由 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 更新之前一切正常。

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