Mac OS X WebKit和CSS位置:固定滚动 [英] Mac OS X WebKit and CSS position:fixed scrolling

问题描述

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

We've run into an optimization problem using WebKit on Mac OS X that we're hoping someone can help us with.

我们已经为Mac OS X编写了Cocoa应用程序，该应用程序实际上管理着指向我们在线网站的单个WebView.大部分情况下一切正常.但是，我们的网站使用CSS的位置:已固定，以保持锁定在WebView顶部的细标题栏"，类似于StackOverflow.com顶部的橙色大欢迎"栏.我们已经确定，在position:fixed处于活动状态时，滚动WebView会强制整个网页重新绘制自身，这将导致滚动缓慢.在position:fixed禁用的情况下，滚动非常快速且流畅；只需绘制滚动到视图"中的页面元素.

We've written a Cocoa app for Mac OS X that essentially manages a single WebView that points to our online web site. Everything is working fine for the most part. However our web site uses CSS's position:fixed to keep a thin "header bar" locked to the top of the WebView, similar to the big orange "Welcome" bar at the top of StackOverflow.com. We've determined that with position:fixed active, scrolling the WebView forces the entire web page to re-draw itself, which causes scrolling to be agonizingly slow. With position:fixed disabled, scrolling is very fast and fluid; only the page elements that are scrolled "into view" need to be drawn.

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

We know that this isn't a bug in our Cocoa app code, nor is it a problem with our HTML/CSS code. The same slow scrolling occurs using WebKit test code from Apple. We can point Apple's test code to http://www.StackOverflow.com as a test and we see the exact same behavior. There's also a test page in the Mozilla bug database that we've been using to test the problem (https://bug201307.bugzilla.mozilla.org/attachment.cgi?id=139911). The odd thing is that some WebKit-based browsers on the Mac (eg, Safari and Chrome) don't have this problem; scrolling is always fast on pages using CSS's position:fixed with those two browsers.

其他人在OS X上使用WebKit遇到此问题吗?如果是这样，我们该怎么做才能加快滚动速度?谢谢.

Has anyone else experienced this problem with WebKit on OS X? If so, what can we do to speed up our scrolling? Thanks.

推荐答案

我在基于Webview的Mac应用程序中遇到了类似的问题.它具有带有position:fixed css属性的页眉和页脚. 10.10.x及更高版本附带的最新Webkit不受此问题的影响.它发生在webkit的特立独行者(10.9.x)中.我通过为Webview设置这些属性来使其工作

I had a similar issue in my webview based mac app. It has header and footer with position:fixed css property. Latest webkit shipped with 10.10.x and above don't suffer from this issue. It happens in webkit for mavericks (10.9.x). I got it working by setting these properties for the webview

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

这篇关于Mac OS X WebKit和CSS位置:固定滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！