javascript - .scroll() 函数在上次更新后在 google chrome 中定位闪烁

Question

说实话，我有点绝望。

在我的 Google Chrome 浏览器更新之后——我认为是版本 39 到 41——我的一个客户网站在 Chrome 中完全毁容了。

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

如果向下滚动，所有 »parallax« 元素都会闪烁。我已经在我的 macbook 版本 39 上检查过了——它在版本 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

将我的评论作为答案:

You could always cache the $(".parallax-container__content") element in a variable so that it is not retrieving it on every time the scroll event is fired, and that goes for the opacity value too (unless that is dynamically changing depending on scroll_tp. Doing this might cause the script to speed up and help the jank that is happening

If it is still really noticeable, then you could use feature detection to detect if CSS transforms are supported in the browser and user 'transform: translate' instead of changing the 'top' value. If it is not supported, then just revert back to changing the 'top'. Changing the 'top' causes a repaint in the browser while 'translate' does not. This repaint is quite expensive to the browser and can cause jank on certain machines. modernizr.com can help you out with feature detection, but it is potentially overkill for just helping out in the this situation.

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

这是最简单的检查方法(记得考虑 vendor 前缀)。