animation&keyframeはIOSのブラウザで問題を表示します.

今日は新しいページを作るために@keyframeを使ってアニメーション効果を完成します.PC端末とAndroid携帯で全部実現できますが、アップルの携帯でアニメ効果を初期化するといくつかのバグがあります.次のように、1本の線の高さは0からなります. 1.19 remまでですが、ページを開くと最初の高さは0.5秒で1.19 remに達しませんでした.つまり、少しの長さで停止しました.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単位を計算してから動画を読み込むと表示されなくなります.自分で測って効果があります