Why CSS animation (rotate) does not work in iOS 15.4-CodePudding

I have an SVG icon and I have applied some CSS animation (rotation) to it, using inline CSS inside the SVG file (below you can see my code and run the snippet).

My problem is that, although the animation works as expected in desktop and in my Android mobile phone, it doesn't work in some iPhones.

For example, I saw it doesn't work in iPhone 11 if it's updated to iOS 15.4 but it works if it's in version 15.3. Also I tried with an iPad which was in 15.3 and it worked, and after the update to 15.4 it stopped working.

Am I missing anything here, or it's just a bug of iOS 15.4?

Thanks!

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-268 0 570 570"  width="160">
    <style>
    .hero-slider__svg-animation {
        -webkit-animation: heroSliderSvgAnimation 1s linear infinite;
        animation: heroSliderSvgAnimation 1s linear infinite;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
    }

    @-webkit-keyframes heroSliderSvgAnimation {
        0% {
            -webkit-transform: rotate(0);
            -webkit-transform-origin: center;
        }
    }
    @-webkit-keyframes heroSliderSvgAnimation {
        100% {
            -webkit-transform: rotate(360deg);
            -webkit-transform-origin: center;
        }
    }
    @keyframes heroSliderSvgAnimation {
        0% {
            transform: rotate(0);
            transform-origin: center;
        }
    }
    @keyframes heroSliderSvgAnimation {
        100% {
            transform: rotate(360deg);
            transform-origin: center;
        }
    }
    </style>
    <path d="M12.7,562.6v-89.3c33.6-0.2,65.2-9.1,92.4-24.7l84.2,19.9L168.1,390c20.2-30,31.9-66.1,31.9-105 c0-103.7-83.8-187.8-187.4-188.3V7.4C165.6,7.9,289.3,132,289.3,285C289.3, 438,165.6,562.1,12.7,562.6z"/>
</svg>

CodePudding user response：

Finally, as A Haworth mentioned,it seems there is an issue with (360deg), but also it doesn't work well with (359deg) or anything more than (180deg).

So I changed the animation to rotate to (-360deg) and I set the animation direction for the element to "reverse".

I post again the updated snippet.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-268 0 570 570"  width="160">
    <style>
    .hero-slider__svg-animation {
        -webkit-animation: heroSliderSvgAnimation 1s linear infinite;
        animation: heroSliderSvgAnimation 1s linear infinite;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-direction: reverse;
        animation-direction: reverse;
    }

    @-webkit-keyframes heroSliderSvgAnimation {
        0% {
            -webkit-transform: rotate(0deg);
            -webkit-transform-origin: 50% 50%;
        }
        100% {
            -webkit-transform: rotate(-360deg);
            -webkit-transform-origin: 50% 50%;
        }
    }
    @keyframes heroSliderSvgAnimation {
        0% {
            transform: rotate(0deg);
            transform-origin: 50% 50%;
        }
        100% {
            transform: rotate(-360deg);
            transform-origin: 50% 50%;
        }
    }
    </style>
    <path d="M12.7,562.6v-89.3c33.6-0.2,65.2-9.1,92.4-24.7l84.2,19.9L168.1,390c20.2-30,31.9-66.1,31.9-105 c0-103.7-83.8-187.8-187.4-188.3V7.4C165.6,7.9,289.3,132,289.3,285C289.3, 438,165.6,562.1,12.7,562.6z"/>
</svg>