CSS 'background-attachment:fixed' 非常滞后答案

【问题标题】：CSS 'background-attachment:fixed' is very laggyCSS 'background-attachment:fixed' 非常滞后
【发布时间】：2014-03-19 06:50:02
【问题描述】：

这个问题以前被问过，但很少大张旗鼓/对如何解决它或任何解决方法知之甚少。另外，距今已有 2 年了，我认为现在是重新调查的好时机：

堆栈溢出问题： How can I prevent background-attachment:fixed; from lagging my website?

堆栈溢出问题2： My fixed background made scrolling the site very slow, what can I do to improve it?

在此讨论： https://code.google.com/p/chromium/issues/detail?id=90637

如您所见，我在本网站的 3 个不同部分使用 background-attachment:fixed：

使用 Chrome 的时间线控制台，似乎每次向下滚动页面都会重新绘制整个页面。这可能非常滞后，尤其是在较旧的计算机上。我正在使用 rMBP，它对我来说也很滞后。

问题是：(a) 是否有任何可用的解决方法，以及 (b) background-attachment:fixed 是否有任何 javascript 替代方案可以提供更好的性能？

【问题讨论】：

从历史上看，固定背景一直是一种痛苦的表现，因为它们的本质。（您可能会认为硬件加速会使它变得非常流畅，但随后也需要进行软件优化......）
今天我在a website I've been working on 上发现了一些background-attachment:fixed 故障 - 请参阅服务页面，最后一个标题的固定背景 - 当您将鼠标悬停在社交媒体按钮（左下角）上时，固定背景闪烁。 在 Chrome、Firefox 和 IE 中，都在 Windows 7 上——它只发生在 Chrome 中。
@BoltClock 很有趣，就像问题的第二部分一样，javascript 实现在这里有什么好处吗？可能是某种类似视差的效果 - 我一直认为使用 JS 制作动画会慢得多，但浏览器似乎实现得如此糟糕，我觉得它可能会更好。
将图像从其自然分辨率放大或缩小也无济于事。尝试以您需要的确切尺寸放入图像，这样浏览器就不必在您滚动时对每个绘画进行所有调整大小的工作。例如，我将min-width: 100%; 从cool-guy.jpg 中取出，然后对背景图像进行缩放，并获得了更好的性能。我想它会更好地实际调整图像大小而不是仅仅使用 devtools。

【解决方案1】：

是的，有一个名为scrollmagic 的不错的javascript 替代方案可能会对您有所帮助。

我成功地将我的background-attachment:fixed 更改为使用 pin 功能。你可以找到一个很好的例子here。

【讨论】：