-webkit动画停止时滚动在移动safari [英] -webkit-animation stops when scrolling on mobile safari

问题描述

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

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

但是，当在mobil safari上查看动画时，动画将暂停页面正在滚动/触摸。

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?

谢谢！

推荐答案

我不相信这是目前可能的。你必须做自己的滚动实现（或使用框架），以避免这种副作用。我推测，但是会欢迎更多的技术洞察 - 这是因为本地滚动和CSS动画争取GPU控制 - 他们都不能拥有它

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

这篇关于-webkit动画停止时滚动在移动safari的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！