Html 带有固定位置元素的Chrome慢速滚动

在我的电脑上，顶部有一个固定的DIV，3个固定的选项卡，底部有一个固定的DIV（这只会在以后登录时显示）

我在Chrome上的滚动性能很差-FF&IE都很好

我准备了一些关于Chrome、固定定位和滚动的问题报告，想看看有没有人有什么建议？我真的很想修复这些元素的位置，但我也希望在Chrome中有良好的滚动性能

有什么解决办法吗

注意：当在chrome上放大时，它会更加明显

---

更新：我曾读到其他人也有类似的问题，并进行了更新，后来被合并为，据称自Chrome 26以来已修复。

有许多方法可以加快这个前端的速度，请尝试Chrome插件以获取一些想法。就我个人而言，我建议在框架上使用相同的设计重建此前端，如，但如果您希望了解此前端的一些细节：

• 正如您所说，标题栏的位置在CSS呈现（）方面造成的时间最多。把里面的图像去掉，换成1倍宽的背景图像。您还不必要地调整了图像的大小，例如（以及此标题中的每个其他图像），将其替换为实际大小的版本
• 您可以保存所有内容图像传输的大量字节

---

最近有一个关于这个特别恼人的问题的bug报告：

它与浮动元素和大型图像的组合有关。Chrome Canary 24.0.1310.0仍然存在问题。

问题以及如何监控它 这是因为Chrome出于某些原因决定，当固定面板经过它时，它需要重新编码和调整任何图像的大小。这一点，你可以在我的作品中看得特别清楚

► 右键单击➔检查➔时间线➔命中⏺ 记录

► 返回页面并上下拖动滚动条（鼠标滚轮滚动效果不佳）

编辑（2016年9月1日）：自发布此消息后，Chrome添加了新功能以帮助监控：

► 右键单击➔检查➔渲染（底部选项卡）

➔☑ 滚动性能问题
➔☑ 油漆泛水
➔☑ FPS仪表（不太重要，但可能有用）

这将帮助您准确地确定哪些元素需要在卷轴上重新绘制，并在屏幕上清晰地突出显示它们

这似乎只是Chrome用于确定是否需要重新绘制较低元素的方法的一个问题

更糟糕的是，为了避免使用

position:fixed

属性，您甚至无法通过在可滚动div上方创建div来回避这个问题。这实际上会造成同样的效果。Chrome几乎可以说，如果页面上的任何内容必须在图像上绘制（即使是在iframe、div或其他任何形式），请重新绘制该图像。因此，不管滚动的是哪个div/frame，问题仍然存在

简易黑客解决方案 但我确实找到了一种绕过这个问题的方法，它似乎没有什么坏处

通过将以下内容添加到固定元素中

/* 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加速

编辑：是由；使用时

变换

，所有子代

位置：固定

元素将固定到该合成层，而不是 整页

替代解决方案 或者，您可以简单地在滚动时隐藏顶部导航，然后将其返回。下面是一个示例，如果粘贴到DevTools>控制台中（或手动在此页面URL栏中键入“javascript:”，并在其后粘贴到下面的代码，然后按enter键），则可以在的标题或网站上工作：

---

@Corylulu的第一个解决方案有效，但并不完全有效（仍然有点结巴，但要少得多）。 我还必须添加

-webkit背面可见性：隐藏到固定元件，使其无口吃

因此，对我来说，当在页面上使用固定元素时，以下功能就像一个符咒，可以防止在chrome中向下滚动时出现口吃：

-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;

编辑：Webkit变换和Webkit背面可见性都会导致字体和图像模糊。因此，请确保仅在悬停状态下应用这两种规则。
将此规则添加到固定元素中

will-change: transform;

阅读，

并阅读有关将更改属性的信息。
关于此问题的任何新闻？我正要问一个类似的问题。@DBUK是的，请查看我的答案据我所知，firefox和chrome在Linux（ubuntu）上的性能相同。@Adam介意选择最佳答案吗？我知道这个问题现在已经非常老了（因为我在另一个时间研究这个问题并分享答案，所以回答得非常晚），但我只是更新了它，因为它似乎仍然受到关注。“-webkit transform”的一个缺点是，“position:fixed”；后代将它用作容器，而不是屏幕。将这些元素移出，一切正常。@albb这很有趣。然而，需要一个位置固定的子元素似乎有点奇怪。然而，我可以理解当使用更动态的布局或可定制的用户样式或主题时，它何时会出现。我最近没有做过关于这个问题的测试。我甚至不确定滚动的性能是否仍然像以前在~Chrome 22中那样受到很大的阻碍。@albb我编辑了这篇文章来提到这个错误，谢谢你的提醒。谢谢你！你的修复修复了我的问题。缓慢滚动的Chrome现在又回到了良好的滚动状态。我想这是一个问题，这么多的造型在我的脸上
will-change: transform;