我正在开发一个网站：http://www.techniquetolife.com 它基本上是一个 5 倍于窗口大小的 div 中的窗口的 div，其他 div 位于大 div 中，使用 overscroll 和 scrollTo 插件进行导航。
该网站在 Safari 和 Firefox for OS/X 中运行良好。但是我很难让它在 Chrome 中工作。我不确定这是否只是 Chrome OS/X 的问题，但是每当我滚动到大 div 中的一个内部 div 时，整个浏览器都会变慢，这只会在 Chrome 中发生......
如果我禁用过度滚动并使用滚动条，它可以 100% 正常工作，但我真的想使用过度滚动拖动来滚动插件。
我不擅长编码，因此将不胜感激。
所有插件/浏览器都是最新版本。
【问题讨论】：
标签： performance google-chrome scroll overscroll
好的，我发布了一个类似问题的答案，我认为这也可能相关。虽然我可能是错的，但你可以测试它。
在此处查看完整问题和我的完整答案：Chrome slow scrolling with fixed position elements
这是因为 Chrome 出于某些原因决定在固定面板越过任何图像时需要重新解码和调整其大小。您可以通过
很好地看到这一点► 右键页面 -> 检查元素 -> 时间线 -> 帧
► 底部点击记录
► 返回页面并上下拖动滚动条
这似乎只是 Chrome 用来确定是否需要重新绘制较低元素的方法的问题。
更糟糕的是，您甚至无法通过在可滚动 div 上方创建 div 来避免使用 position:fixed 属性来解决此问题。这实际上会产生同样的效果。几乎 Chrome 说如果页面上的任何内容必须在图像上绘制（即使在 iframe、div 或任何可能的内容中），请重新绘制该图像。因此，无论您滚动哪个 div/frame，问题仍然存在。
但我确实找到了一种解决此问题的方法，到目前为止似乎没有任何缺点。通过添加
-webkit-transform: translateZ(0);
到您的固定面板，将该 div 放在它自己的合成层中。
【讨论】：