iOS中CSS的transition动画闪动bug

场景：
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动画绘制，我就不知道了，希望有大神能解答。

iOS中CSS的transition动画闪动bug

推荐阅读更多精彩内容