为什么使用JS更改此CSS效果仅适用于某些值？

Question

我试图在用户滚动页面时相对于视口缓慢移动图像.与此处发现的效果类似https://ihatetomatoes.net/demos/parallax-scroll-effect-part-2/

如果图像移动较小的值,则它会平滑移动.如果它被移动了更大的数量,那么它变得非常笨拙.

var imageOffset = lastScrollY * 0.9;
$image.css({top: `${imageOffset}px`});     //Runs badly

var imageOffset = lastScrollY * 0.3;
$image.css({top: `${imageOffset}px`});     //Runs well

为什么价值会如此影响绩效呢？

我尝试了所有不同的CSS样式(变换,顶部,底部,背景位置).Dev工具说我在60fps的时间限制内很好.如果页面上和多个浏览器和设备上只有图像,则会发生这种情况.这不仅适用于图像,也适用于文本或其他任何内容.

坏版本:https://jsfiddle.net/4vcg8mpk/58/

好的版本:https://jsfiddle.net/4vcg8mpk/59/

在Firefox中最引人注意的问题是,在Chrome中,它在第一次滚动时会很明显然后安定下来.最引人注目的是使用滚轮或触控板而不是拖动侧滚动条

Answer 1

这是因为您正在尝试设置影响页面布局的属性.这些属性要求浏览器在每次布局属性更改时重新计算DOM的布局.您可能没有在第二个选项中遇到性能滞后,因为布局快速重新绘制,但这并不意味着您在动画化这些属性时最终不会遇到性能问题.

我建议用CSS查看关于动画性能的这篇文章.它很旧,但信息仍然有效.我知道你说你试过动画其他属性,但我建议你仔细看看所有这些建议,然后实现对浏览器来说"便宜"的东西.