13

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 CSS3 are GPU accelerated?

user967722
  • 1,213
  • 1
  • 20
  • 26
  • 2
    It's based on browsers. So first decide what browsers you want to support, then find the GPU accelerated CSS properties for those browsers. – Jasper Aug 27 '12 at 19:08
  • 1
    @Jasper - it's more complicated than just a browser. Different iOS devices have different capabilities and Safari behaves differently on different devices. Similarly, PC browsers recognize some hardware configurations and only apply GPU acceleration on some hardware. – jfriend00 Aug 27 '12 at 19:14
  • Good point, since we generally have no idea what kind of hardware is actually running on a machine, I guess the best we can do right now is attempt to use accelerated properties for browsers that support it and hope that the device is actually accelerating the property. Or has someone thought about this more than me? – Jasper Aug 27 '12 at 19:35
  • It's actually a browser/OS combination. For example, a bunch of stuff in Chrome is hardware accelerated on MacOS, but not on Vista (for example) – Michael Mullany Aug 27 '12 at 21:57

2 Answers2

11

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!

Rich Bradshaw
  • 71,795
  • 44
  • 182
  • 241
3

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.

jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • iPhone models should almost be irrelevant since different phone versions run the same iOS/browser and it's the browser that determines the GPU accelerated properties. – Jasper Aug 27 '12 at 19:10
  • @Jasper - that's not true at all. Different iPhones have different hardware capabilities and Safari runs differently on different pieces of iDevice hardware. They don't all have the same GPU capabilities and the browser doesn't behave identically on all iDevices. Though you might think it's all the same iOS, there's definitely code that is specific to some devices in there. – jfriend00 Aug 27 '12 at 19:11
  • I'm looking and can't find anything easily, do you have some documentation or some reference for this? I'm only going off of my experience testing on different devices. – Jasper Aug 27 '12 at 19:14
  • @Jasper - About 18 months ago, I tested 2d and 3d transformations used for slideshow transitions on several different iDevices. I found drastically different behavior on an iPod vs. an older iPhone vs a newer iPhone. This does not surprise me because those devices have different capabilities. I found some written material describing these differences at the time, but don't have that info now. Apple has added a lot more GPU capabilities in later devices so it would be natural that Safari run on a newer device would use more of it than Safari run on an older device. – jfriend00 Aug 27 '12 at 19:16
  • @Jasper - A relevant link: http://stackoverflow.com/questions/9661876/css-is-transition-left-top-gpu-accelerated – jfriend00 Aug 27 '12 at 19:21
  • Thanks for that, I get that the multitude of devices/browsers/hardware make this exact question very difficult to really answer. I'm just wondering about the differences between iPhone versions. ...And now I'm interested, so if I find anything specific I'll make sure to post a link here. – Jasper Aug 27 '12 at 19:27