新的Chrome和Opera版本中的閃爍問題

瀏覽器更新後，Chrome和Opera中出現閃爍的奇怪問題。我的網站是互相重疊的div。在這個重疊期間，重疊的div模糊。要做到這一點，我使用2功能。新的Chrome和Opera版本中的閃爍問題

 (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和opera更新之前，一切正常。

來源

2016-02-12 MaSza

眨眼問題是因爲您每次滾動時都會檢查，然後根據該滾動進行一些操作。在執行函數之前，除了滾動高度之外，更改條件語句以檢查「鎖定」類。這種方式發生了變化，它不會改變回來，除非這兩個條件都得到滿足。這應該可以解決你的眨眼問題。 –

我不明白。可以再解釋一次嗎？你的意思是我必須在「scroll」函數中添加這個條件來檢查「鎖定」類中的「if」嗎？ – MaSza

更改您的條件爲這樣的東西。你目前正在做的事情會迫使瀏覽器每次都重新開始，然後重新引用引起眨眼的類。添加第二個條件意味着除非滿足這兩個條件，否則瀏覽器不會執行任何操作。

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

來源

2016-02-19 15:13:46

新的Chrome和Opera版本中的閃爍問題

回答

相關問題