Html 带有固定位置元素的 Chrome 缓慢滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12969228/
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
Chrome slow scrolling with fixed position elements
提问by Adam
On my I have a fixed DIV at the top, 3 fixed tabs and a fixed div at the bottom (this will only be shown when logged in - in the future).
在我的顶部有一个固定的 DIV，在底部有 3 个固定的选项卡和一个固定的 div（这只会在登录时显示 - 将来）。
I am getting poor scrolling performance on Chrome only - FF & IE are fine.
我只在 Chrome 上滚动性能很差 - FF 和 IE 很好。
I have ready some problem reports about Chrome, Fixed Positioning and Scrolling and wanted to see if anyone had any suggestions? I really would like to fix these elements in their locations but I would also like good scrolling performance in Chrome.
我已经准备好了一些关于 Chrome、Fixed Positioning 和 Scrolling 的问题报告，想看看是否有人有任何建议？我真的很想在它们的位置修复这些元素，但我也希望在 Chrome 中有良好的滚动性能。
Any Ideas on a fix?
关于修复的任何想法？
Note: its much more noticeable when zoomed on chrome...
注意：放大 chrome 时它更明显......
Update: I have read other people have a similar issues and updated this Chrome issue, which was later merged into 136555, allegedly fixed since Chrome 26.
更新：我读过其他人有类似的问题并更新了这个 Chrome 问题，后来合并到136555，据称自 Chrome 26 以来已修复。
回答by corylulu
Problem and How to Monitor It
问题及如何监控
The reason for this is because Chrome for some reasons decides it needs to redecode and resize any images when a fixed panel goes over it. You can see this particularly well with
这是因为 Chrome 由于某些原因决定在固定面板经过时需要重新解码和调整任何图像的大小。你可以特别清楚地看到这一点
? Right-Click?Inspect ?Timeline ?Hit ? Record
? Go back to the page and drag scrollbar up and down (Mouse-wheel scrolling not as effective)
? 右键单击? 检查? 时间表？打 ？记录
? 返回页面并上下拖动滚动条（鼠标滚轮效果不佳）
Edit (9/1/2016):Since posting this, Chrome added new features to help monitor this:
编辑（2016 年 9 月 1 日）：自从发布此内容后，Chrome 添加了新功能来帮助监控：
? Right-Click?Inspect ?Rendering (Bottom tabs)
??????? Scrolling Performance Issues
??????? Paint Flashing
??????? FPS Meter (less important, but can be useful)This will help you identify exactly what elements require repaints on scrolls and highlight them clearly on screen.
? 右键单击? 检查? 渲染（底部选项卡）
？？？? ?? 滚动性能问题
？？？? ?? 油漆闪烁
？？？? ?? FPS Meter （不太重要，但可能有用）这将帮助您准确识别需要在卷轴上重新绘制的元素，并在屏幕上清楚地突出显示它们。
This seems to just be a problem with the method Chrome is using to determine if a lower element needs to be repainted.
这似乎只是 Chrome 用来确定是否需要重新绘制较低元素的方法的问题。
To make matters worse, you can't even get around the issue by creating a div above a scrollable div to avoid using the position:fixedattribute. This will actually cause the same effect. Pretty much Chrome says if anything on the page has to be drawn over an image (even in an iframe, div or whatever it might be), repaint that image. So despite what div/frame you are scrolling it, the problem persists.
更糟糕的是，您甚至无法通过在可滚动 div 上方创建 div 来避免使用该position:fixed属性来解决该问题。这实际上会导致相同的效果。Chrome 几乎说，如果页面上的任何内容必须在图像上绘制（即使在 iframe、div 或任何可能的内容中），请重新绘制该图像。因此，无论您滚动的是什么 div/frame，问题仍然存在。
.
.
The Easy Hack Solution
简单的黑客解决方案
But I did find one hack to get around this issue that seems to have few downside.
但我确实找到了一个解决这个问题的技巧，它似乎没有什么缺点。
By adding the following to the fixed elements
通过将以下内容添加到固定元素
/* Edit (9/1/2016): Seems translate3d works better than translatez(0) on some devices */
-webkit-transform: translate3d(0, 0, 0);
Some browsers might require this to prevent flickering
某些浏览器可能需要这样做以防止闪烁
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
This puts the fixed element in its own compositing layer and forces the browser to utilize GPU acceleration.
这会将固定元素放在其自己的合成层中，并强制浏览器利用 GPU 加速。
EDIT:One potential issuewas pointed out to me by albb; when using
transform, all descendantposition:fixedelements will be fixed to that composition layer rather than the entire page.
编辑：albb向我指出了一个潜在的问题；使用时 ，所有后代 元素都将固定到该合成层而不是整个页面。
transformposition:fixed
.
.
Alternative Solution
替代方案
Alternatively, you could simply hide the top navigation while scrolling and bring it back in afterwards. Here is an example that could work on the stackoverflow.com's header or a site like theverge.comif pasted in DevTools > Console(or manually type "javascript:" into this pages URL bar and paste in the code below after it and hit enter):
或者，您可以在滚动时简单地隐藏顶部导航，然后再将其带回来。这是一个可以在stackoverflow.com的标题或类似theverge.com的网站上工作的示例，如果粘贴到DevTools > Console（或手动在此页面的 URL 栏中键入“ javascript:”并粘贴下面的代码，然后按回车）：
/* Inject some CSS to fix the header to the top and hide it
* when adding a 'header.hidden' class name. */
var css= document.createElement("style");
css.type = 'text/css';
css.innerHTML = 'header { transition: top .20s !important; }';
css.innerHTML += 'header.hideOnScroll { top: -55px !important; }';
css.innerHTML += 'header { top: 0 !important; position: fixed !important; }';
document.head.appendChild(css);
var header = document.querySelector("header");
var reinsertId = null; /* will be null if header is not hidden */
window.onscroll = function() {
if(!reinsertId) {
/* Hides header on scroll */
header.classList.add("hideOnScroll");
setTimeout(function() { header.style.visibility = "hidden"; }, 250);
} else {
/* Resets the re-insert timeout function */
clearTimeout(reinsertId);
}
/* Re-insert timeout function */
reinsertId = setTimeout(function(){
header.classList.remove("hideOnScroll");
header.style.visibility = "visible";
reinsertId = null;
}, 1500);
};
回答by Mag4work
The first solution of @Corylulu works, but not completely (still a little stutter, but much less).
I also had to add -webkit-backface-visibility: hidden;to the fixed element to be stutter free.
@Corylulu 的第一个解决方案有效，但不完全（仍然有点口吃，但少得多）。我还必须添加-webkit-backface-visibility: hidden;到固定元素才能避免口吃。
So for me the following worked like a charm to prevent scroll down stutter in chrome when using fixed elements on the page:
所以对我来说，以下内容就像一个魅力，可以防止在页面上使用固定元素时在 chrome 中向下滚动口吃：
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
Edit: Webkit-transform and webkit-backface-visibility both cause blurry fonts and images. So make sure you only apply both on the hover state.
编辑：Webkit-transform 和 webkit-backface-visibility 都会导致字体和图像模糊。因此，请确保仅在悬停状态下同时应用两者。
回答by Az.Youness
回答by surjikal
There's a recent bug report on this particularly annoying issue: http://code.google.com/p/chromium/issues/detail?id=155313
最近有一个关于这个特别烦人的问题的错误报告：http: //code.google.com/p/chromium/issues/detail?id=155313
It has to do with the combination of floating elements and large images. Still a problem on Chrome Canary 24.0.1310.0.
它与浮动元素和大图像的组合有关。Chrome Canary 24.0.1310.0 上仍然存在问题。
回答by AlecRust
There are a number of ways you could speed up this front end, try out the PageSpeed InsightsChrome plugin for some ideas. Personally I'd recommend rebuilding this front end with the same design on top of a framework like Twitter's Bootstrap, but if you'd like some specifics on this front end:
有很多方法可以加速这个前端，试试PageSpeed InsightsChrome 插件以获得一些想法。我个人建议在Twitter 的 Bootstrap等框架之上使用相同的设计重建这个前端，但如果你想了解这个前端的一些细节：
- As you say, the positioning of your header bar is causing the most time in terms of CSS rendering (CSS stress test results). Get rid of that big imagethat's in there and replace it with a 1px wide background image. You're also resizing images like your logo(and every other image in this header) unnecessarily, replace with actual-size versions
- You could save a lot of bytes transferred by optimizingall your content images
- 正如您所说，标题栏的位置在 CSS 渲染方面造成了最多的时间（CSS 压力测试结果）。摆脱那里的大图像，并用 1px 宽的背景图像替换它。您还不必要地调整了徽标（以及此标题中的所有其他图像）等图像的大小，替换为实际大小的版本
- 您可以通过优化所有内容图像来节省大量传输的字节
