Question

我们在Mac OS X上使用WebKit遇到了一个优化问题，我们希望有人可以帮助我们。

我们为Mac OS X编写了一个Cocoa应用程序，它基本上管理一个指向我们在线网站的WebView。在大多数情况下，一切都很好。然而，我们的网站使用CSS的位置：固定以保持薄的“标题栏”锁定到WebView的顶部，类似于StackOverflow.com顶部的大橙色“欢迎”栏。我们已经确定，对于position：fixed active，滚动WebView会强制整个网页重新绘制自己，这会导致滚动速度非常慢。位置：固定禁用，滚动非常快速流畅;只需要绘制滚动到视图中的页面元素。

我们知道这不是我们的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的位置在页面上滚动总是很快：用这两个浏览器修复。

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

Answer 1

我可能会离开这里，因为我不确定在你的网页视图中是否同样适用，但是使用强制导航到自己图层的样式可能有所帮助。

像translateZ（0）或translate3d（0,0,0，）之类的东西。在使用Phonegap进行构建时，我遇到了类似的问题，并且将一些想法用于分层确实有所帮助。

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

Answer 2

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

    [w setWantsLayer:YES];

Answer 3

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

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

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

3 个答案: