animation&keyframe在IOS下浏览器显示问题
前言：
在页面上用animation与ketframe完成按钮上字体的放大缩小动画，在pc和安卓上都好着了，但在ios上会出现各种问题
.btn{ width:10rem; height:3rem; animation: varySize 2s ease-in-out infinite; } @keyframes varySize{ 0%{ font-size: 1.24rem; } 50%{ font-size: 1.7rem; } 100%{ font-size: 1.24rem; } }
ios的bug情况：
1、字体非常小，看不清，虽然有动画
2、字体有动画，正常显示，但是按钮会随着动画上下动
解决：
1、延迟加载
初始化的时候弄个定时器延迟加载动画效果，页面首次加载的时候动画效果就正常了。
.btn{ width:10rem; height:3rem; &.animation{ animation: varySize 2s ease-in-out infinite; } }
js中：
//JS增加内容 setTimeout(()=>{ $('.btn').addClass('animation') },20)
推测原理是，首次加载页面时IOS计算rem单位的时候有问题，切换组件隐藏显示再加载动画的时候能正常显示，是因为此时计算rem已经正确了。
所以延迟加载首页动画，等页面计算好rem单位后再加载动画就不会出现显示问题了。
2、动画部分剥离
<p class="btn">显示按钮</p>
这样写是对p标签增加了动画，剥离开后：
<p class="btn"><span>显示按钮</span></p>
改为对p内的span标签增加动画，这样的话就不会影响按钮：
//JS增加内容 setTimeout(()=>{ $('.btn span').addClass('animation') },20)
俩种解决方法是分别针对俩个bug的，最后经测试都没问题了。