-webkit-animation在移动Safari浏览器上滚动时停止

问题描述：

我正在为移动网站制作css3加载动画。-webkit-animation在移动Safari浏览器上滚动时停止

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

但是，查看关于美孚Safari中的动画时，动画将暂停时加载程序通过使用下面的HTML/CSS工作得很好该页面正在滚动/触摸。即使用户正在滚动页面，是否有任何方法可以保持动画不变？

谢谢！

答

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

GPU控制问题听起来很熟悉。从谷歌搜索我能找到其他人有同样的问题，他们提到，使用“-webkit转换风格：保存3d;”将解决问题。我试图通过将它放在.loader类的规则中，但它并没有为我解决问题。 – FLomid

魔法调用preserve-3d用于在iOS6之前可靠地工作，但iOS6将此行为更改为不可靠。 “还有哭泣和咬牙切齿” –

@MichaelMullany [解决方案1]（http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/）重新启用iOS6中的硬件加速。这在滚动时解决了我的旋转问题。 – Pwner

-webkit-animation在移动Safari浏览器上滚动时停止

相关推荐