How do I tell Safari iOS7 not to stop css animations on scroll?

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);

score 0 · Answer 1 · answered Mar 31 '14 at 19:22

0

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/

answered Mar 31 '14 at 19:22

RachelNabors

86
6

any idea if http://iscrolljs.com/ would help. hammer looks like it's to much for what I need. – orbitory Apr 01 '14 at 15:02
I wouldn't know, but if it does, please let us know :) – RachelNabors Apr 02 '14 at 17:49

How do I tell Safari iOS7 not to stop css animations on scroll?

1 Answers1

Linked