-webkit-animation 在移动 Safari 上滚动时停止答案

【问题标题】：-webkit-animation stops when scrolling on mobile safari-webkit-animation 在移动 Safari 上滚动时停止
【发布时间】：2012-11-17 04:08:25
【问题描述】：

我正在为移动网站制作 css3 加载动画。通过使用以下 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); }
    }

但是，在 mobil safari 上查看动画时，当页面被滚动/触摸时，动画会暂停。即使用户正在滚动页面，有什么方法可以让动画继续播放吗？

谢谢！

【问题讨论】：

标签： css mobile-safari webkit-animation

【解决方案1】：

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

【讨论】：

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