Animation&keyframe display problem in browser under IOS

To create a new page today, you need to use @keyframe to complete the animation effect, which can be implemented on both the PC and Android phones, but there are some bugs in initializing the animation effect on the Apple phone.
As follows, the height of a line ranges from 0 to 1.19rem, but the first time the page is opened, the height does not reach 1.19rem after 0.5 seconds. It just shows a little length and then stops. After 0.5 seconds, it will continue to execute other animations. Switch the component to hide and then display, this time the animation effect is normal again.

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

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

The solution is to make a timer delay loading animation effect when initializing, and the animation effect will be normal when the page loads for the first time.

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

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

The speculation principle is that there is a problem when IOS calculates the rem unit when the page is loaded for the first time. When the component is hidden and displayed, it can be displayed normally when the animation is loaded again. This is because the rem is calculated correctly at this time. So delay loading the homepage animation, wait for the page to calculate the rem unit and then load the animation, there will be no display problems.

Pro test is effective!