.scroll()函数在谷歌浏览器上次更新后定位闪烁

Question

说实话,我有点绝望.

我的Google Chrome浏览器更新后 - 从我认为版本39到41 - 我的一个客户网站在Chrome中完全毁了.

你可以在这里看到它:http: //prinovis-media-day.com/

如果向下滚动,所有»parallax«元素都会闪烁. 我已经在版本39上的Macbook上检查了它 - 它在版本39中绝对没问题.

基本上,我正在做的创建这种效果非常简单:

$("window").scroll(function(){

     var move_value = Math.round(scroll_top * 0.3);
     var opacity_value = *some other value*;

     $(".parallax-container__content").css({

        'opacity': opacity_value,
        'padding-top': move_value +'px'

     });

});

有谁知道这件事情是什么？在此更新之前,它就像一个魅力......

非常感谢,我真的很感激任何答案!

Answer 1

将我的评论移至答案：

您始终可以将 $(".parallax-container__content") 元素缓存在变量中，这样它就不会在每次触发滚动事件时检索它，并且这也适用于不透明度值（除非它根据情况动态变化） scroll_tp。这样做可能会导致脚本加速并帮助解决正在发生的卡顿

如果它仍然很明显，那么您可以使用功能检测来检测浏览器是否支持 CSS 转换，并用户“transform:translate”而不是更改“top”值。如果不支持，则只需恢复更改“顶部”即可。更改“top”会导致浏览器中重新绘制，而“translate”则不会。这种重新绘制对于浏览器来说是相当昂贵的，并且可能会导致某些机器上的卡顿。Modernizr.com 可以帮助您进行功能检测，但在这种情况下仅仅提供帮助可能有点过分了。

看看这个来检测支持的某些样式：http://lea.verou.me/2009/02/check-if-a-css-property-is-supported/

这是最简单的检查方法（记住考虑供应商前缀）。