Changes between Version 3 and Version 4 of QtWebKitGraphics

Timestamp:

Mar 16, 2010 9:53:06 AM (14 years ago)

Author:

noam.rosenthal@nokia.com

Comment:

--

QtWebKitGraphics

@@ -18 +18 @@
 So, CSS box model to decorate dynamic content - transforms and regular images for dynamic UI.
 
+
+=== Use static images ===
+Sometimes it's tempting to use webkit's drawing features, like -webkit-gradient, when it's not actually necessary - maintaining images and dealing with Photoshop and drawing tools can be a hassle. However, using CSS for those tasks moves that hassle from the designer's computer to the target's CPU. Gradients, shadows, and other decorations in CSS should be used only when necessary (e.g. when the shape is dynamic based on the content) - otherwise, static images are always faster.
+
+
 === Value of the $ ===
 Be careful of high-level object-oriented nicely-designed Javascript libraries on top of the core Webkit (like Dojo or jQuery, hence the $). They make the application code look nicer, but make it hard to find the source of a performance problem, as it adds layers of complexity.
@@ -25 +30 @@
 
 == Accelerated compositing == 
-Accelerated compositing is (at the time of writing this) a new feature in webkit trunk, and therefore is not stable yet. Accelerated compositing is disabled by default. To enable it, you need to use a QGraphicsWebView, and set a QWebSettings flag:
-
-{{{
-#!cpp
-myWebSettings->setAttribute(QWebSettings::AcceleratedCompositingEnabled, true);
-}}}
-
-Accelerated compositing doesn't magically accelerate '''everything'''. To make use of it, the web developer has to use CSS3 animations (-webkit-transition / -webkit-animation), and only animate the ''-webkit-transform'' or ''opacity'' attributes. Animating ''left'', ''margin'', ''width'' or any other attribute (mainly the ones related to the CSS box model) will not be accelerated: because the box model would have to make expensive calculations for each frame.
+Accelerated compositing enables hardware acceleration of CSS animations, using QGraphicsView. To make use of it, the web developer has to use CSS3 animations (-webkit-transition / -webkit-animation), and only animate the ''-webkit-transform'' or ''opacity'' attributes. Animating ''left'', ''margin'', ''width'' or any other attribute (mainly the ones related to the CSS box model) will not be accelerated: because the box model would have to make expensive calculations for each frame.
 Note that animating -webkit-transform and opacity should be very good for plenty of use cases - scrolling, for example, can be made very fast like this:
 
@@ -49 +47 @@
 }}}
 
+It's also important to use the same sequence of transform operations when animating. For example, use:
 
-Again, this feature is not yet stable but the web developers should know in advance what would and wouldn't be accelerated when using it.
-Also, 3D is not fully supported by QtWebkit as of yet, mainly the preserves-3D and backface-visibility CSS attributes.
+from {-webkit-transform: scale(1) translate(100) } to { -webkit-transform: scale(2) translate(0) }
+
+instead of
+
+from {-webkit-transform: translate(100) } to {-webkit-transform: scale(2) }
+
 
 == Benchmarking CSS animations==