Анимация большого изображения не работает должным образом в Safari

Question

У меня большое, широкое изображение, которое я анимирую с помощью CSS.Изображение отображается и анимируется, как и ожидалось, в Chrome (как на рабочем столе, так и на Android) и Firefox.

Однако в Safari (как для настольных ПК, так и для мобильных устройств, v12.1) изображение обычно не анимируется или, что еще хуже, - отображается частично / не отображается вообще - при начальной загрузке.После одного или двух обновлений страницы оно начинает работать так, как ожидалось (возможно, потому, что загружает изображение из кэша).

После отключения анимации изображение отображается нормально при первоначальной загрузке.

Демо
Исходный код

Есть идеи, почему Safari ведет себя так?

Answer 1

Я закончил тем, что загружал изображение через JavaScript, что заставляло его правильно отображаться и анимироваться в Safari.Это не решает источник проблемы, но прекрасно работает как временное исправление.

const imageElement = document.getElementById('image');
const image = new Image();

image.onload = function() {
  imageElement.src = image.src;
  imageElement.className = 'animation-class-name';
};
image.src = 'pic.jpg';