45

在我的顶部，我有一个固定的 DIV，3 个固定的选项卡和底部的一个固定的 div（这只会在登录时显示 - 将来）。

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

我已经准备好一些关于 Chrome、固定定位和滚动的问题报告，想看看是否有人有任何建议？我真的很想在它们的位置修复这些元素，但我也希望在 Chrome 中具有良好的滚动性能。

关于修复的任何想法？

注意：在 chrome 上放大时会更加明显......

更新：我读过其他人有类似的问题并更新了这个 Chrome 问题，后来合并到136555，据称自 Chrome 26 以来已修复。

4

5 回答 5

86
于 2013-02-28T23:11:44.610 回答
16

@Corylulu 的第一个解决方案有效，但并不完全（仍然有点口吃，但少得多）。我还必须添加-webkit-backface-visibility: hidden;到固定元素才能避免口吃。

所以对我来说，在页面上使用固定元素时，以下内容就像一种魅力，可以防止在 chrome 中向下滚动卡顿：

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

编辑：Webkit-transform 和 webkit-backface-visibility 都会导致字体和图像模糊。因此，请确保仅在悬停状态下同时应用两者。

于 2014-09-11T14:24:19.823 回答
5

将此规则添加到您的固定元素，

will-change: transform;

从Here阅读解决方案，并从Here
阅读will-change属性。

于 2017-09-04T09:22:41.977 回答
2

最近有一个关于这个特别烦人的问题的错误报告： http ://code.google.com/p/chromium/issues/detail?id=155313

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

于 2012-10-28T20:50:33.387 回答
1

有很多方法可以加速这个前端，试试PageSpeed Insights Chrome 插件以获得一些想法。就个人而言，我建议在Twitter 的 Bootstrap之类的框架之上使用相同的设计重建这个前端，但如果你想要这个前端的一些细节：

  • 正如您所说，标题栏的位置在 CSS 渲染（CSS 压力测试结果）方面占用的时间最多。摆脱那里的大图像，并用 1px 宽的背景图像替换它。您还不必要地调整了您的徽标（以及此标题中的所有其他图像）等图像的大小，替换为实际大小的版本
  • 您可以通过优化所有内容图像来节省大量传输的字节
于 2012-10-21T19:44:11.937 回答