Hardware accelerated CSS animations in QtWebkit?

I'd like to share with the community a project I'm working on, while it's still in its development phase (isn't that what labs is for? :))
The goal of the project is to get CSS3 animations to a reasonable FPS performance, mainly on embedded hardware where it's a pain.


The idea is to implement webkit's GraphicsLayer concept, which allows platform-specific implementations of CSS transform and opacity animations, using the graphics-view and the Qt animation framework as a backend. This would only work for QGraphicsWebView and not for QWebView, as rendering a separate QGraphicsScene inside QWebView would probably not give us much performance benefit.

Preliminary results are very promising - The leaves demo, for example, runs 4 times faster on Maemo Fremantle than it does without the acceleration, and it looks graphically accurate.

The reason this gives us a performance benefit is mainly because of graphics-item caching: when a CSS animation occurs inside webkit, the item that's being animated has to go through a re-layout and re-draw every so often, while with the accelerated approach we draw it once into a QPixmap (QGraphicsView takes care of that) and then it's just a series of fast and furious pixmap blts. The hardware acceleration becomes relevant when the images are big and the blt itself becomes a bottleneck.

This project is not ready to go upstream, as it supports many delicate use-cases that need to be tested. But if you're interested in participating (or to just comment!), this has so far been a fun project to hack on.


  1. Get the Git repo from git://, branch accel
  2. Build or get a relatively new version of Qt, possibly without building QtWebkit
  3. Build Webkit from the downloaded Git repo:

    export QTDIR=[my-qt-4.6-root]
    export PATH=$QTDIR/bin:$PATH
    ./WebKitTools/Scripts/build-webkit --qt
  4. Run ./WebKitBuild/Release/bin/QGVLauncher --accel: This will enable the necessary web-setting for composite-layer acceleration. You can also create a small QGraphicsWebView example yourself, as long as you enable the new settings flag: QWebSettings::AcceleratedCompositingEnabled
  5. Load a website with CSS transform/opacity animations: like this one or this one.
  6. Hack. Most of the code is in WebCore/platform/graphics/qt/GraphicsLayerQt.cpp, or you could just search for the term USE(ACCELERATED_COMPOSITING)
  7. Send merge requests through Gitorious or comments on Bugzilla


Blog Topics: