Блог

На моей домашней странице есть анимация, где мой логотип встает на место. На настольных компьютерах и мобильных симуляторах Chrome и Firefox он работает нормально, но на реальном телефоне он совершает дополнительный поворот на 90 градусов. Вот скриншоты из firefox mobile view и my 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 считывал метаданные изображения в определенном повороте. Исправление заключалось в создании нового логотипа в правильной ориентации с самого начала, и теперь он работает нормально. Я думаю, что, возможно, я повернул это последнее изображение в программе просмотра Apple после того, как оно было экспортировано из Inkscape.

Таким образом, настольный браузер видел изображение таким, каким оно было после поворота, а мобильный браузер (в данном случае Apple) считывал данные изображения и не принимал во внимание тот факт, что оно было повернуто.