Chrome使用固定位置元素慢速滚动
在我的顶部有一个固定的DIV，底部有3个固定的标签和一个固定的div（这只在login后才会显示）。
我在Chrome浏览器上的滚动性能不佳 – FF和IE都很好。
我已经准备好了关于Chrome的一些问题报告，固定定位和滚动，想看看有没有人有任何build议？ 我真的想要解决这些元素在他们的位置，但我也希望在Chrome浏览器中有良好的滚动性能。
任何想法解决？
注意：在放大Chrome时更显着
更新：我已经读过其他人有类似的问题，并更新了这个Chrome问题 ，后来合并到136555 ，据称从Chrome 26固定。
问题和如何监视它
原因是因为Chrome由于某些原因决定了当固定面板超过它时需要重新编码和调整任何图像的大小。 你可以看到这个特别好
► 右键单击 ➔检查➔时间轴➔点击⏺录制
►回到页面并上下拖动滚动条（鼠标滚轮滚动效果不佳）
编辑（9/1/2016）：自发布以来，Chrome添加了新function来帮助监控：
► 右键单击 ➔检查➔渲染（底部选项卡）
➔☑滚动性能问题
➔☑油漆闪烁
➔☑FPS仪表（不太重要，但可以使用）这将帮助您准确识别哪些元素需要在卷轴上重新绘制，并在屏幕上清晰地突出显示。
这似乎只是Chrome浏览器正在使用的方法，以确定是否需要重新绘制较低的元素的问题。
更糟糕的是，你甚至不能通过在可滚动div上面创build一个div来避免这个问题，以避免使用position:fixed属性。 这实际上会导致相同的效果。 很多的Chrome浏览器说，如果页面上的任何内容必须在图像上绘制（即使是在iframe，div或其他任何可能的情况下），重绘该图像。 所以，尽pipe你正在滚动它的div / frame，问题仍然存在。
。
简单的黑客解决scheme
但是我确实发现了一个解决这个问题的方法。
通过添加以下内容到固定的元素
/* Edit (9/1/2016): Seems translate3d works better than translatez(0) on some devices */ -webkit-transform: translate3d(0, 0, 0);
有些浏览器可能会要求这样做，以防止闪烁
-webkit-backface-visibility: hidden; -webkit-perspective: 1000;
这将固定元素放置在自己的合成层中，并强制浏览器利用GPU加速。
编辑： albb指出了一个潜在的问题 ; 当使用
transform，所有后代position:fixed元素将被固定到该合成层而不是整个页面。
。
替代scheme
或者，您可以简单地在滚动时隐藏顶部导航，然后将其重新导入。 你可以在jQuery中这样做：
//#network-bar refers to the fixed panel. This example works on TheVerge.com //Note also that jQuery() can be replaced with $() in most instances. var isHidden = false; function topNavScroll() { $(window).scroll(function() { if(!isHidden){ //Animate off the screen while scrolling $('#network-bar').animate({ top: '-35px' }, 250, function() { //Make hidden to disable re-rendering $('#network-bar')[0].style.visibility = "hidden";}); isHidden = true; } clearTimeout($.data(this, 'scrollTimer')); $.data(this, 'scrollTimer', setTimeout(function() { //Animate back on the screen when finished scrolling and make visible $('#network-bar')[0].style.visibility = "visible"; $('#network-bar').animate({ top: '0px' }, 250, function() {}); isHidden = false; }, 1500)); }); }
@Corylulu的第一个解决scheme的工作，但不完全（仍然有点结巴，但更less）。 我还必须添加-webkit-backface-visibility: hidden; 到固定元件是免费的。
所以对我来说，下面的工作就像一个魅力，以防止在页面上使用固定的元素时滚动下来在Chrome中的口吃：
-webkit-transform: translateZ(0); -webkit-backface-visibility: hidden;
编辑：Webkit转换和Webkit背面可见性都导致模糊的字体和图像。 所以请确保你只应用hover状态。
最近有一个关于这个特别恼人的问题的bug报告： http : //code.google.com/p/chromium/issues/detail?id=155313
它与浮动元素和大图像的组合有关。 Chrome Canary 24.0.1310.0仍然存在问题。
有很多方法可以加快这一前端，请尝试使用PageSpeed Insights Chrome插件获取一些想法。 就个人而言，我build议在Twitter的Bootstrap之类的框架之上重build这个前端，但是如果你想在这个前端做一些细节的话：
- 正如你所说的，标题栏的定位在CSS呈现（ CSS压力testing结果 ）方面造成了最多的时间。 摆脱那里的大图像 ，并用1px宽的背景图像replace它。 您也在不必要地重新调整徽标等图片（以及此标头中的所有其他图片），并将其replace为实际大小的版本
- 您可以通过优化所有内容图像来节省大量的字节
将此规则添加到您的固定元素，
will-change: transform;
从这里阅读解决scheme，
并从这里阅读有关将改变财产。
