Geek Answers Handbook

High CPU Usage with CSS Rotation in Spotify

I need to use rotation in our Spotify app. To do this, I use the following CSS:

<!DOCTYPE html> <html> <head> <style type="text/css"> @-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } #entity { background-color: #000; width: 200px; height: 200px; -webkit-animation: rotate 3s infinite linear; } </style> </head> <body> <div id="entity"></div> </body> </html>

In Chrome (26.0.1410.43) there are no big changes in CPU usage (~ 3%). But in Spotify 0.8.8.459.g4430eae7 I get constant CPU usage from 50% to 100%. In addition to this code, this also happens for Spotify native load throbber. My computer is a 2.5 GHz MacBook Pro for Intel Core i5, 8 GB 1600 MHz, DDR3, Mac OS 10.8.1. How can I implement this rotation with less CPU usage?

+4
source share
2 answers

Spotify's version of Chromium does not support hardware acceleration at all, so CSS conversions like this will have very significant overhead.

+4
source

Try forced hardware acceleration:

  #entity { -webkit-transform: translate3d(0, 0, 0); }

Source: http://davidwalsh.name/translate3d

+3
source

More articles:


All Articles