animation&keyframe在IOS下浏览器显示问题

今天新做一个页面需要用到@keyframe完成动画效果，在PC端和安卓手机上都可以实现，但是在苹果手机上初始化动画效果会有一些BUG。
如下，一条线的高度从0 到 1.19rem，但是打开页面第一次高度经过0.5秒并没有到1.19rem，就是显示了一点长度就停止了，过了0.5秒以后会继续执行其他的动画。切换组件隐藏再显示，这个时候动画效果又是正常的。

.scen_processLine1 {
   top:2.14rem;
   animation:lineH5 .5s 0s 1 forwards; 
}

@keyframes lineH5 {
  0% {height: 0;}
  100% {height: 1.19rem;}
}

解决方法是，初始化的时候弄个定时器延迟加载动画效果，页面首次加载的时候动画效果就正常了。

.scen_processLine1 {
    top:2.14rem;
    &.animation {
        animation:lineH5 .5s .5s 1 forwards;
    }
}

//JS增加内容
setTimeout(()=>{
    $('.scen_processLine1').addClass('animation')
},20)

推测原理是，首次加载页面时IOS计算rem单位的时候有问题，切换组件隐藏显示再加载动画的时候能正常显示，是因为此时计算rem已经正确了。所以延迟加载首页动画，等页面计算好rem单位后再加载动画就不会出现显示问题了。

亲测有效哦！