I have an SVG icon and I have applied some CSS animation (rotation) to it, using inline CSS inside the SVG file (at the end of the post you can see my code in CodePen).
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?
I appreciate your help!
EDIT: I've just realized that it works as expected when I visit directly the link to where I have uploaded the SVG image. I mean, If I have uploaded the SVG image to
example.com/path-to-icon.svg I can see it rotating as expected.
However, when I am trying to use it like an image, it does not work. I mean, If I use
<img src="example.com/path-to-icon.svg"> it does not work...