内容字号:默认大号超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到微软雅黑切换到宋体

iOS中CSS的transition动画闪动bug

2016-12-30 14:40 出处:未知 人气: 评论(0

场景:

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

分享给小伙伴们:
本文标签: CSStransition

相关文章

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

CopyRight © 2015-2016 QingPingShan.com , All Rights Reserved.