使用div上的固定背景图像修复滚动性能

Question

我正在尝试修复网站上的滚动性能问题。 我有一些带有background-size: cover div元素background-size: cover和background-attachment: fixed 。 据我了解，这些都是相当密集的GPU。 我试图通过使背景图像在div上成为单独的图层来解决此问题。

我发现这个站点演示了如何执行此操作，但是我对他们所做的事情感到困惑。 什么是@include clearfix; ？ 如何在我的网站上实施此操作？

https://fourword.fourkitchens.com/article/fix-scrolling-performance-css-will-change-property

我已经在我的网站上附加了div元素中的代码，希望对其进行优化。

另外，这是我网站的网址（正在进行中，但您可以看到滚动问题）。

http://petermankiewich.com/

谢谢您的意见！

 .imagediv1 { background-size: cover !important; background-attachment: fixed !important; max-height: 1500px; height: 70vh; background-position: bottom center !important; -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; } 

 <div class="imagediv1" style="background:url(Images/workstationpic.jpg)"></div> 

Answer 1

将Position属性更改为relative，然后检查它是否适合您。

.frontCover{position: relative;}