Css -在mobile safari上滚动时，webkit动画停止

我正在为一个移动网站制作css3加载动画。通过使用以下HTML/CSS，加载程序工作正常：

HTML:

但是，在mobil safari上查看动画时，当滚动/触摸页面时，动画将暂停。即使用户正在滚动页面，是否有办法保持动画继续

---

谢谢

我认为目前不可能做到这一点。您必须自己执行滚动实现（或使用框架）以避免这种副作用。我推测，但我欢迎更多的技术见解——这是因为本地滚动和CSS动画都在争夺GPU控制权——它们都不能拥有GPU控制权

GPU控制问题听起来很熟悉。通过谷歌搜索，我发现其他人也有同样的问题，他们提到使用“-webkit transform style:preserve-3d；”可以解决这个问题。我尝试将其放在.loader类的规则中，但这并没有解决我的问题。在iOS6之前，对preserve-3d的神奇调用可以可靠地工作，但iOS6将此行为更改为不可靠。“还有哭泣和咬牙切齿”@MichaelMullany在iOS6中重新启用了硬件加速。这修复了滚动时的旋转问题。

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

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