What exact parts of CSS3 are GPU accelerated?

Question

I\'ve been reading several references like \"X is GPU accelerated\" and \"Y is not GPU accelarated\", but I can\'t find a full list. What exact parts of CSS

Answer 1

Right, this is an interesting topic, and it does really depend on the browser + graphics card. I've been meaning to do some research on this for a while, so here's a quick summary.

Webkit (Safari, Chrome, iOS, Android)

In Webkit, AnimationBase.cpp used to specify it, but it seems to have moved! Doh! Well, anyway, if you search the code for ACCELERATED_COMPOSITING, you'll find it.

Specifically, if something matches one of these, then it can be accelerated (at least in Chromium):

• Layer has 3D or perspective transform CSS properties
• Layer is used by element using accelerated video decoding
• Layer is used by a element with a 3D context or accelerated 2D context
• Layer is used for a composited plugin
• Layer uses a CSS animation for its opacity or uses an animated webkit transform
• Layer uses accelerated CSS filters
• Layer has a descendant that is a compositing layer
• Layer has a sibling with a lower z-index which has a compositing layer (in other words the layer is rendered on top of a composited layer)

Source

---

Gecko (Firefox)

In Gecko, https://wiki.mozilla.org/Platform/GFX/HardwareAcceleration explains their plan/implementation, much like IE, on XP the options are more limited, but every other OS gets some acceleration if the graphics card is supported properly. Firefox 4 (I think!) added acceleration for text, canvas and transforms.

---

Trident (IE)

IE10 seems to have pretty much everything HW accelerated. http://blogs.msdn.com/b/ie/archive/2011/04/26/understanding-differences-in-hardware-acceleration-through-paintball.aspx

It is pretty quick, so I don't really doubt their claim!

Answer 2

There is no CSS3 specification that discusses anything about GPU acceleration. Instead, it is up to each browser maker or the company that implements the browser on specific hardware to decide which parts of CSS3 they will use the GPU for. And, this can easily change from one device to the next.

For example, as of about a year ago (I don't have more current info), 3d transformations were GPU accelerated on an iPhone3, but not 2d tranformations. But, I would expect that that info could be completely different for the iPhone3s or iPhone4 or future iPhone5.