Iphone上奇怪的CSS行为

我在我的主页上有一个动画，在那里我的徽标旋转到位。在桌面以及Chrome和Firefox移动模拟器上，它都可以正常工作，但在实际手机上，它会额外旋转90度。以下是firefox mobile view和我的iphone的截图

这是正确的

这是不正确的（iphone）

代码呢

@keyframes spin { 100% { transform:rotate(720deg); } }
@keyframes size { 
  0% { opacity: 0; transform: scale(0); }                                             
  30% { opacity: 0; transform: scale(0); }                                             
  100% { opacity: 1; transform: scale(1); } 
}

---

事实证明，这个问题与代码无关，而是苹果浏览器在特定的循环中读取图像元数据。修复方法是从一开始就在正确的方向上创建一个新徽标，现在它可以正常工作。我想我可能在apple viewer中旋转了从Inkscape导出的最后一幅图像

因此，桌面浏览器看到的是旋转后的图像，而移动浏览器（本例中为苹果）读取的是图像数据，而没有考虑到图像旋转的事实