High CPU usage (even on idle) on Webkit about css-toggle-switch

[ghinda]

I can't seem to be able to replicate this, and it definitely shouldn't happen, since it's just CSS on form elements.

Here's a screenshot of my Chrome Task Manager, on Kubuntu 13.04.

The tab with the toggle switches is the last one, while the other one is Github.

Are you using any extensions that might be injecting additional js/css into the tab?

[micred]

As you can see in your screenshoot you get a 40% CPU usage for a tab that's already loaded (why 4 frame per second?!).

[ghinda]

It's most probably related to a bugfix for older versions of Webkit, which has an infinite animation.
https://github.com/ghinda/css-toggle-switch/blob/gh-pages/toggle-switch.css#L225-232

/* Bugfix for older Webkit, including mobile Webkit. Adapted from:
* http://css-tricks.com/webkit-sibling-bug/
*/
.switch, .toggle {
-webkit-animation: bugfix infinite 1s;
}

@-webkit-keyframes bugfix { from { position: relative; } to { position: relative; } }

I'll take a deeper look to see if this is the cause, and if it's possible to be removed.

[ghinda]

Yes, it seems that the infinite animation, required for the Webkit bugfix, is causing the high CPU usage.
Even if the bug has been fixed in newer versions of desktop browsers, I still need the bugfix for Android support (4.0 and bellow - I haven't tested 4.1 and 4.2) and probably older iOS support (but I haven't tested yet).

Removing the bugfix completely means giving up support for these, which is not really an option right now.

I tried a number of workarounds, like using hardware accelerated properties like 3d transforms - which does seem to resolve the high CPU issue in desktop Chrome, but makes the switches to stop working on Android (and also probably on older iOS and Webkit browsers).

I'll keep the issue open for now, while I look for a different bugfix.