526互联

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

发布时间 2023-09-05 11:16:51作者: 阳光下的向日葵

前言：

在页面上用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的，最后经测试都没问题了。