iOS中CSS的transition动画闪动bug
2016-12-27 本文已影响2390人
西蒙SIMON
场景：
1.在开发中使用浏览器打开有CSS transition动画的网页，发现动画一开始是连贯的，到了后面动画还没结束就突然闪到动画结束的位置。
2.浏览器组件是WKWebView。
3.重复打开浏览器，情况会越来越严重，到最后动画没了，直接从动画开始位置变换到动画结束的位置。
4.系统越低级越严重，到了iOS10闪动情况减缓了不少。
下面是测试的html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Language" content="zh-cn"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=640,target-densitydpi=device-dpi,user-scalable=no">
</head>
<style>
*{
margin: 0;
}
#demo{
width:200px;
height: 200px;
position: absolute;
right: 0;
background-color:green;
-webkit-transition:all 1s;
transition:all 1s;
}
#btn{
font-size: 30px;
color:#fff;
width: 170px;
height: 50px;
line-height: 50px;
border-radius: 12px;
text-align: center;
background-color:red;
position: absolute;
top: 250px;
left: 250px;
}
</style>
<body style="position: relative;">
<div id="demo"></div>
<div id="btn">我是按钮</div>
</body>
<script type="text/javascript" src="http://s1.bdstatic.com/r/www/cache/static/jquery/jquery-1.10.2.min_f2fb5194.js"></script>
<script>
var bol = true;
$('#btn').click(function(){
if (bol) {
$('#demo').css('webkit-transform','translate(-400px)');
$('#demo').css('transform','translate(-400px)');
bol = false;
}
else{
$('#demo').css('webkit-transform','translate(0px)');
$('#demo').css('transform','translate(0px)');
bol = true;
}
})
</script>
</html>
就是一个点击按钮就能左右移动方块的demo
Paste_Image.png
解决：
看了好久没发现原因，只能用二分法注释代码来找（囧）。
最后发现，是下面这个方法导致的：
[subview drawViewHierarchyInRect:subview.bounds afterScreenUpdates:YES];
这是用来对网页进行截屏的方法，当afterScreenUpdates的参数是YES的时候，系统会等待所有视图变更完毕之后采取截取屏幕。例如，在调用了此方法之后，仍然去修改subview的样式，那么系统就会等到修改完成之后才进行截屏工作。
把参数设成NO，或者不使用这个方法就会解决此问题。
类似的，还有以下这个方法：
- (nullable UIView *)snapshotViewAfterScreenUpdates:(BOOL)afterUpdates NS_AVAILABLE_IOS(7_0);
凡是带有"AfterScreenUpdates"字样的参数应该都有这个问题。
至于更深层次的原因，例如是不是调用以上的方法会占用GPU资源、还是影响了CSS动画绘制，我就不知道了，希望有大神能解答。
