CSS 我的固定背景使网站滚动速度非常慢，我可以做些什么来改进它？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7033979/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
My fixed background made scrolling the site very slow, what can I do to improve it?
提问by Emerson
I changed the background of my discussion forum using the CSS below
我使用下面的 CSS 更改了论坛的背景
http://forum.antinovaordemmundial.com
http://forum.antinovaordemmundial.com
html {
background: url(http://antinovaordemmundial.com/mystuff/logo_blog.jpg) no-repeat center center fixed;
background-image: url(http://antinovaordemmundial.com/mystuff/logo_blog.jpg);
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
background-attachment: fixed;
background-position-x: 50%;
background-position-y: 50%;
background-origin: initial;
background-clip: initial;
background-color: initial;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The image is 1600x711 and 88k. The scrolling of the pages are now very slow. Is the CSS problematic or the image should be smaller somehow?
图像为 1600x711 和 88k。页面的滚动现在非常缓慢。CSS有问题还是图像应该以某种方式变小？
Edit: I tried changing to:
编辑：我尝试更改为：
body {
color: #000;
font-family: Verdana, Arial, Sans-Serif;
font-size: 13px;
text-align: center; /* IE 5 fix */
line-height: 1.4;
background-attachment: fixed;
background-clip: initial;
background-color: #51010E;
background-image: url(http://antinovaordemmundial.com/mystuff/logo_blog.jpg);
background-origin: initial;
background-position: initial initial;
background-repeat: initial initial;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
}
But it is still very slow on scrolling.
但是滚动还是很慢。
采纳答案by John Stimac
The problem goes away for me when I remove the background-sizeproperty. I think it was the scaling of the large image that was causing the problem. If that doesn't work, just remove the background image altogether. However, I've never heard of a large background image causing lag before.
当我删除该background-size属性时，问题就消失了。我认为是导致问题的大图像的缩放。如果这不起作用，只需完全删除背景图像。但是，我以前从未听说过大背景图像会导致延迟。
回答by kossdav
I had the same problem and solved it using this jQuery plugin : http://srobbin.com/jquery-plugins/jquery-backstretch/
我遇到了同样的问题并使用这个 jQuery 插件解决了它：http: //srobbin.com/jquery-plugins/jquery-backstretch/
It doesn't use any CSS3 property but it works fine and doesn't have any performance issue on Chrome 13 or Firefox 6.
它不使用任何 CSS3 属性，但它运行良好，并且在 Chrome 13 或 Firefox 6 上没有任何性能问题。
回答by user2810762
I thought I would just contribute here. Rather than use background-attachment: fixed; use :before and position: fixed; problem sorted. I ran into this same problem.
我以为我会在这里做出贡献。而不是使用背景附件：固定；使用：之前和位置：固定；问题排序。我遇到了同样的问题。
Read more here: http://fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property
在此处阅读更多信息：http: //fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property
回答by WPExplorer
The issue is actually with the background-attachment fixed value if you change it to background-attachment: scroll for mobile devices it should fix the lag.
问题实际上在于 background-attachment 固定值，如果您将其更改为 background-attachment: scroll 对于移动设备，它应该修复延迟。
回答by Andy Clarke
Changing your image file type to SVG significantly improved the performance of my site when experiencing the same issue!
在遇到相同问题时，将图像文件类型更改为 SVG 显着提高了我的网站的性能！
回答by TNF
Also, applying the following style to the htmltag improves the frame rate significantly in WebKit browsers, Chrome included:
此外，将以下样式应用于html标签可显着提高 WebKit 浏览器的帧速率，Chrome 包括：
-webkit-transform: translate3d(0,0,0);
This works in all cases with (large) background photos and choppy scrolling as far as I can tell.
据我所知，这适用于（大）背景照片和断断续续的滚动的所有情况。
回答by ExillustX
Compressing the image (reducing the size), solved my issue, I highly recommend using a tool like Radical Image Optimization Tool (RIOT), very effective and easy.
压缩图像（减小尺寸），解决了我的问题，我强烈建议使用像Radical Image Optimization Tool (RIOT)这样的工具，非常有效且简单。
On linux, this can be done using GIMP, you can also remove image's metadata to reduce the size, use tool like exiftool.
