Mac OS X WebKit 和 CSS 位置：固定滚动答案

【问题标题】：Mac OS X WebKit and CSS position:fixed scrollingMac OS X WebKit 和 CSS 位置：固定滚动
【发布时间】：2011-11-01 21:17:28
【问题描述】：

我们在 Mac OS X 上使用 WebKit 时遇到了一个优化问题，希望有人能帮助我们解决这个问题。

我们为 Mac OS X 编写了一个 Cocoa 应用程序，它本质上管理一个指向我们在线网站的 WebView。大部分情况下一切正常。然而，我们的网站使用 CSS 的 position:fixed 来保持一个细的“标题栏”锁定在 WebView 的顶部，类似于 StackOverflow.com 顶部的橙色“欢迎”栏。我们已经确定，当 position:fixed 处于活动状态时，滚动 WebView 会强制整个网页重新绘制自身，这会导致滚动非常缓慢。使用 position:fixed 禁用，滚动非常快速流畅；只需要绘制滚动“进入视图”的页面元素。

我们知道这不是我们的 Cocoa 应用程序代码中的错误，也不是我们的 HTML/CSS 代码的问题。使用 Apple 的 WebKit 测试代码也会出现同样的缓慢滚动。我们可以将 Apple 的测试代码指向 http://www.StackOverflow.com 作为测试，我们会看到完全相同的行为。 Mozilla bug 数据库中还有一个测试页面，我们一直在使用它来测试问题 (https://bug201307.bugzilla.mozilla.org/attachment.cgi?id=139911)。奇怪的是，Mac 上的一些基于 WebKit 的浏览器（例如，Safari 和 Chrome）没有这个问题。在使用 CSS 的 position:fixed 这两个浏览器的页面上滚动总是很快。

有没有其他人在 OS X 上遇到过 WebKit 的这个问题？如果是这样，我们可以做些什么来加快滚动速度？谢谢。

【问题讨论】：

我想我正在经历这个。查看harrisnovick.com/orange 并单击文章图块。我会尝试确认 position:fixed 是否是滚动性能不佳的原因。
Harris，我确实看到您的网站存在一些重绘问题，但我认为不是同一个问题。如果我将鼠标光标悬停在您的一个网格元素上并滚动，那么滚动会变得有点慢，因为所有网格元素都在滚动操作期间重新绘制自己。但是，如果我将鼠标光标放在窗口外并滚动，网格元素不会重绘自己。此外，左侧的橙色条似乎永远不会重绘自己。
这一切让我觉得你的问题与我的略有不同。在我们的窗口中，所有元素都一致地重新绘制自己，包括 position:fixed 之一。
我也遇到这种情况了，你找到解决办法了吗？

标签： css macos cocoa webkit webview

【解决方案1】：

我可能会离开这里，因为我不确定这是否适用于您的 web 视图，但使用将导航强制到自己的图层的样式可能会有所帮助。

类似 translateZ(0) 或 translate3d(0,0,0,) 的东西。在使用 Phonegap 构建并将一些想法应用于分层时，我遇到了类似的问题，这确实很有帮助。

我相信浏览器可以在涉及三维的情况下利用硬件加速。

【讨论】：

【解决方案2】：

我遇到了类似的问题：当我滚动页面时，固定栏在闪烁。所以我强制 WebView 使用图层并修复了

    [w setWantsLayer:YES];

【讨论】：

【解决方案3】：

我在基于 webview 的 mac 应用程序中遇到了类似的问题。它具有带有位置的页眉和页脚：固定的 css 属性。 10.10.x 及更高版本附带的最新 webkit 不会遇到此问题。它发生在 webkit for mavericks (10.9.x) 中。我通过为 webview 设置这些属性来让它工作

    [self.webView setWantsLayer:YES];
    [self.webView setCanDrawSubviewsIntoLayer:YES];

【讨论】：