場景：
1.在開發(fā)中使用瀏覽器打開有CSS transition動(dòng)畫的網(wǎng)頁栖疑，發(fā)現(xiàn)動(dòng)畫一開始是連貫的，到了后面動(dòng)畫還沒結(jié)束就突然閃到動(dòng)畫結(jié)束的位置。
2.瀏覽器組件是WKWebView。
3.重復(fù)打開瀏覽器丘损，情況會(huì)越來越嚴(yán)重，到最后動(dòng)畫沒了工扎，直接從動(dòng)畫開始位置變換到動(dòng)畫結(jié)束的位置。
4.系統(tǒng)越低級(jí)越嚴(yán)重衔蹲，到了iOS10閃動(dòng)情況減緩了不少肢娘。
下面是測試的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>
就是一個(gè)點(diǎn)擊按鈕就能左右移動(dòng)方塊的demo
解決：
看了好久沒發(fā)現(xiàn)原因呈础，只能用二分法注釋代碼來找（囧）。
最后發(fā)現(xiàn)橱健，是下面這個(gè)方法導(dǎo)致的：
[subview drawViewHierarchyInRect:subview.bounds afterScreenUpdates:YES];
這是用來對網(wǎng)頁進(jìn)行截屏的方法而钞，當(dāng)afterScreenUpdates的參數(shù)是YES的時(shí)候，系統(tǒng)會(huì)等待所有視圖變更完畢之后采取截取屏幕拘荡。例如臼节，在調(diào)用了此方法之后，仍然去修改subview的樣式珊皿，那么系統(tǒng)就會(huì)等到修改完成之后才進(jìn)行截屏工作网缝。
把參數(shù)設(shè)成NO，或者不使用這個(gè)方法就會(huì)解決此問題蟋定。
類似的粉臊，還有以下這個(gè)方法：
- (nullable UIView *)snapshotViewAfterScreenUpdates:(BOOL)afterUpdates NS_AVAILABLE_IOS(7_0);
凡是帶有"AfterScreenUpdates"字樣的參數(shù)應(yīng)該都有這個(gè)問題。
至于更深層次的原因驶兜，例如是不是調(diào)用以上的方法會(huì)占用GPU資源扼仲、還是影響了CSS動(dòng)畫繪制，我就不知道了抄淑，希望有大神能解答屠凶。
