Question

I have strange problem with blinking in chrome and opera after browser update. My site is build of divs which overlapse one on the another. During this overlapse, div which is overlapsed is blured. To do this I use 2 function.

     (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"

            });

        }
}

Of course css class "latched" change position to fixed.

Ok, so my problem is that when I put video in one div, this div blink. This happend after chrome update. I found that blinking is connected with blur. Any ideas which can help me with this issue? Everything work fine before last chrome and opera updates.

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

Blinking issue in new chrome and opera versions

1 个答案: