-webkit-animation stops when scrolling on mobile safari

Question

I'm making a css3 loading animation for a mobile website. The loader works just fine by using the following HTML / CSS:

HTML:

<div class="loader"></div>

CSS:

    .loader {
    background-color: rgba(0,0,0,0);
    border: 6px solid rgba(0,0,0,0.75);
    opacity: 0.5;
    border-top: 6px solid rgba(0,0,0,0);
    border-left: 6px solid rgba(0,0,0,0);
    border-radius: 60px;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    width: 60px;
    height: 60px;
    margin: 0 auto;
    -moz-animation: spin 1s infinite linear;
    -webkit-animation: spin 1s infinite linear;
}

    @-moz-keyframes spin {
        0% { -moz-transform:rotate(0deg); }
        100% { -moz-transform:rotate(360deg); }
    }

    @-webkit-keyframes spin {
        0% { -webkit-transform:rotate(0deg); }
        100% { -webkit-transform:rotate(360deg); }
    }

However, when viewing the animation on mobil safari, the animation will pause when the page is being scrolled / touched. Is there any way to keep the animation going even if the user is scrolling the page?

Thanks!

Nev

Answer 1

I do not believe this is currently possible. You have to do your own scrolling implementation (or use a framework) to avoid this side effect. I speculate, but would welcome a more technical insight - that this is because both native scrolling and CSS Animation contend for GPU control - they both can't have it

Norvol

The GPU control issue sounds familiar. From googling I was able to find someone else with the same problem and they mentioned that using "-webkit-transform-style: preserve-3d;" would resolve the issue. I attempted this by placing it in the rule for the .loader class, but it did not resolve the issue for me. – Nev

The magic invocation of preserve-3d used to work reliably before iOS6, but iOS6 changed this behavior to be unreliable. "And there was weeping and gnashing of teeth" – Norvol

@MichaelMullany Solution 1 re-enables hardware acceleration in iOS6. This fixed my rotation problem while scrolling. – Freetown

Answer 2

As of 2022 some developers experience this still.

The easiest way to handle it is:

.loader {
    …
    -webkit-transform: translateZ(0);
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
}

Those are three properties that have been proven to work.

Source: http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/

Hierophant