CSS Animation Performance


#1

Hi,

We have chosen electron to provide user interface on our devices to our customers, however we are observing that with CSS animation, such as pulsating a touch on the screen, takes almost 100% of a CPU core. Our ARM Cortex-A7platform does have Mali400 MP GPU available, with electron running with –use-gl=egl, this is what the chrome://gpu reported:

Graphics Feature Status:
Canvas: Software only; accelerated 2d canvas is unstable in Linux at the moment (2015)
Flash: Hardware Accelerated
Flash Stage3D: Software only
Flash Stage3D Baseline profile: Software only
Compositing: Hardware Accelerated
Multiple Raster Threads: Disabled
Rasterization: Software only
Threaded Rasterization: Enabled
Video Decode: Software only
Video Encode: Hardware Accelerated
WebGL: Hardware Accelerated

So I have the following question:

1> which GPU feature is CSS animation suppose to utilize out of the list?
2> has electron implemented the support to utilize GPU for CSS animations?
3> if not, is there any plan for that down the pipeline?

Thanks in advance for your answers and comments,
Hunter


#2

Electron uses Chromium, the open source components of Google’s Chrome, as its rendering engine. So in that light:

  1. I don’t personally know, though others here might
  2. Electron doesn’t implement anything this low-level, it relies on Chromium for those features
  3. You would have to take a look at what information the Chromium team publishes

#3

Not sure, but usually the CSS3 properties that trigger the GPU are 2D and 3D transforms. So if you are animating using transforms you should see a great performance increase instead of top, left, etc.


#4

I was using the new animation api and I got 45% of CPU when I was doing a simple transitions from one point to another, and this behavior was the same using a transion class with pure css3. So I decided don’t do it. We have to remember that behind the render process there is a lot of process more. I’m not sure but in 3d stuffs, even in 2d, almost everyting most be recalculated, so that’s mean repainted. Therefor is something spected; as says @Pier, you should see a great performance increase.