#css #safari #webkit #css-animations
#css #safari #webkit #css-анимация
Вопрос:
У меня есть большое широкое изображение, которое я анимирую с помощью CSS. Изображение отображается и анимируется, как и ожидалось, в Chrome (как на рабочем столе, так и на Android) и Firefox.
Однако в Safari (как для настольных компьютеров, так и для мобильных устройств, версия 12.1) изображение обычно не анимируется или, что еще хуже, отображается частично / не отображается вообще — при начальной загрузке. После одного или двух обновлений страницы он начинает вести себя так, как ожидалось (вероятно, потому, что он загружает изображение из кэша).
После отключения анимации изображение отображается нормально при начальной загрузке.
Есть идеи, почему Safari так себя ведет?
Комментарии:
1. Сам тестировал его в Safari 12.1 на своем Macbook, но, кажется, работает нормально?
2. Обязательно откройте инспектор и на вкладке сеть отключите кэш (значок рядом с корзиной для мусора). Также очистите кэши (Разработка> Пустые кэши). Для меня он правильно загружает изображение, но не анимирует его (iOS ведет себя по-другому, более причудливо).
Ответ №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';