Performance 谷歌浏览器和拖动滚动

我正在开发一个网站： 它基本上是一个5倍于窗口大小的div中的window的div，其他div在大div中，使用overscroll和scrollTo插件来导航

该网站在Safari和Firefox for OS/X上运行得非常好，但在Chrome上运行时我遇到了严重的问题。我不确定这是否只是Chrome OS/X的问题，但每当我滚动到大div中的一个内部div时，整个浏览器都会变慢，这只发生在Chrome中

如果我禁用overscroll并使用滚动条，它可以100%正常工作，但我真的想使用overscroll拖动滚动插件

我不擅长编码，因此任何帮助都将不胜感激

---

所有的插件/浏览器都是最新版本。

好吧，我发布了一个类似问题的答案，我认为这可能也有关系。虽然我可能错了，但你可以测试一下

请参见此处的完整问题和我的完整答案：

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

► 右键单击页面->检查元素->时间线->框架

► 触底

► 返回页面并上下拖动滚动条

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

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

position:fixed

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

简易黑客解决方案 但我确实找到了一个绕过这个问题的黑客，到目前为止似乎没有任何负面影响。加入

-webkit-transform: translateZ(0); 

---

到您的固定面板，将该div放入其自己的合成层。

我对这个答案感到惊讶。我正在努力拖动一个比屏幕还大的图像。其想法是让用户在放大地图后拖动地图，但只有在Chrome中，当拖动到某种随机坐标时，图像才会消失。在检查了所有计算值后，我考虑了渲染问题，然后尝试了这种方法，在图像中添加了-webkit transform:translateZ（0），问题看起来得到了解决。我知道我的问题与这篇文章无关，但答案对我很有用。非常感谢！