与格固定的背景图像定影性能滚动 [英] Fixing scrolling performance with fixed background image on div

问题描述

我试图解决我的网站上滚动preformance问题。我有一个几个div元素的背景大小：覆盖和背景附件：固定。据我所知，这些都是pretty GPU密集。我试图通过使背景图像的DIV一个单独的层来解决这个问题。

我发现这个网站发现证明是如何做到这一点，但我对自己所做的事感到困惑。什么是 @include clearfix; ？我怎么能在我的网站实现这个？

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

我从我的网站上div元素，我希望优化附code。

此外，这里是url到我的网站（其进展中的工作，但你可以看到有滚动的问题）。

http://petermankiewich.com/

感谢您的输入！

\r

\r

.imagediv1 {\r
  背景大小：覆盖重要的;！\r
  背景附件：固定重要;！\r
  最大高度：1500px;\r
  高度：70vh;\r
  背景位置：底部中心重要;！\r
  -moz-箱阴影：插图0 0 10px的＃000000;\r
  -webkit-箱阴影：插图0 0 10px的＃000000;\r
  箱阴影：插图0 0 10px的＃000000;\r
}

\r

＆LT; D​​IV CLASS =imagediv1的风格=背景：网址（图像/ workstationpic.jpg）＆GT;＆LT; / DIV＆GT;

\r

\r

\r

解决方案

的位置属性更改为相对的，检查它是否适合你。

  .frontCover {位置：相对;}
 

I am trying to fix scrolling preformance problems on my site. I have a few div elements with background-size: cover and background-attachment: fixed. As I understand these are pretty gpu intensive. I am trying to fix the problem by making the background images a separate layer on the div.

I found this site that demonstates how to do this, but I am confused by what they have done. What is @include clearfix;? How can I implement this on my site?

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

I have attached the code from a div element on my site which I hope to optimize.

Also, here is the url to my site (its a work in progress but you can see how there is scrolling issues).

http://petermankiewich.com/

Thank you for your input!

.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>

解决方案

Change the Position property to relative and check if it works for you.

.frontCover{position: relative;}

这篇关于与格固定的背景图像定影性能滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！