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