Geek Answers Handbook

Mac OS X WebKit and CSS Position: Fixed Scrolling

We ran into an optimization problem using WebKit on Mac OS X, and we hope someone can help us.

We wrote a Cocoa application for Mac OS X that essentially manages a single WebView that points to our online site. Everything is working fine for the most part. However, our website uses the CSS position: fixed to keep the thin “title bar” closed at the top of the WebView, like the large orange Welcome bar at the top of StackOverflow.com. We determined that with the position: fixed active, scrolling WebView forces the entire web page to re-draw itself, which leads to painful slowness of scrolling. With position: fixed off, scrolling very fast and fluid; only page elements that scroll "in the view" need to be drawn.

We know that this is not a bug in our Cocoa application code, and this is not a problem with our HTML / CSS code. The same slow scrolling occurs using Apple's WebKit test code. We can point the Apple test code to http://www.StackOverflow.com as a test, and we see the same behavior. There is also a test page in the Mozilla error database that we used to test the problem (https://bug201307.bugzilla.mozilla.org/attachment.cgi?id=139911). It is strange that some WebKit-based browsers on Macs (like Safari and Chrome) do not have this problem; scrolling is always performed on pages using CSS position: fixed with these two browsers.

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

+7
source share
3 answers

I could be here because I'm not sure the same will apply in your web view, but using a style that forces navigation to its own layer may help.

Something like translateZ (0) or translate3d (0,0,0,). I ran into similar issues when building using Phonegap, and actually helped me apply some ideas for layering.

I believe that the browser can use hardware acceleration, which involves the third dimension.

0
source

I had a similar problem: the fixed bar flickered as I scroll through the page. So I got WebView to use layers, and I fixed

[w setWantsLayer:YES];
0
source

I had a similar problem in my Mac app. It has a header and footer with position: fixed css property. The latest webkit shipped with 10.10.x and later does not suffer from this problem. This happens in webkit for mavericks (10.9.x). I got it working by setting these properties for web browsing

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

More articles:


All Articles