iOS中CSS的transition动画闪动bug

场景：
1.在开发中使用浏览器打开有CSS transition动画的网页，发现动画一开始是连贯的，到了后面动画还没结束就突然闪到动画结束的位置。
2.浏览器组件是WKWebView。
3.重复打开浏览器，情况会越来越严重，到最后动画没了，直接从动画开始位置变换到动画结束的位置。
4.系统越低级越严重，到了iOS10闪动情况减缓了不少。

下面是测试的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动画绘制，我就不知道了，希望有大神能解答。