极客观点
项目管理
HarmonyOS
在使用animation做循环动画的时候，在苹果手机上查看会闪一下，请问各位这是什么情况？怎么解决？感谢！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>txt</title>
<style type="text/css">
html,body{height: 100%;overflow: hidden;}
.page{width: 100%;height: 100%;overflow: hidden;position: fixed;top: 0;left: 0;}
.page02{background:red;}
.house{width:50px;height: 50px;background:#00aeff;position: absolute;animation: myHouse 3s infinite linear normal forwards;}
@keyframes myHouse{
0%{top: 65%;left: -25%;transform: scale(2.4);}
100%{top: 15%;left: 22%;transform: scale(1);}
}
</style>
</head>
<body>
<div class="page page02">
<div class="house"></div>
</div>
</body>
</html>
html5
我也遇到过这个问题。但是目前没有彻底的解决方案。
经过多次尝试，我发现这些属性加上后，出现BUG的几率最小。但是偶尔还是会出现那个BUG。这个估计和IOS内部的渲染机制有关系。我发现IOS有个很有趣的渲染机制，感觉有点画蛇添足了，他会在元素被挡住的时候进行检测，一般超过1s还是多少，会停止渲染那个动画视图，估计是为了节约电吧！但是在重新显示这个动画的时候，他的动画执行就会出现BUG，如果是挡住了也在后台不去破坏渲染图形的进程，估计不会有这样的BUG，但是会耗电，这样看来，IOS的确有点自作聪明了。