How do I tell Safari iOS7 not to stop css animatio

Question

I have a rotating css animation that stops when the page is scrolled. I tried enabling the hardware acceleration but without luck.

This doesn't work while the page is scrolled

-webkit-animation: rotating 5s linear infinite;
-webkit-transform-style: preserve-3d;
-webkit-transform: translateZ(0);

Answer 1

In short: You can't. It's a feature, not a bug. iOS Safari stops ALL JS and animation on scroll to conserve battery life (try scrolling a page of animated gifs, for instance).

I've heard you can use hammer.js to make every scroll a touch interaction, which would mean no such caveats. However, it will suck batteries. Hard.

Here's more: http://eightmedia.github.io/hammer.js/