动画大图像在 Safari 上无法正常工作答案

【问题标题】：Animating large image doesn't work properly on Safari动画大图像在 Safari 上无法正常工作
【发布时间】：2019-09-04 12:08:41
【问题描述】：

我有一张大而宽的图片，我正在使用 CSS 制作动画。该图像在 Chrome（桌面版和 Android 版）和 Firefox 上按预期显示和动画。

但是，在 Safari（桌面版和移动版，v12.1）上，图像通常没有动画效果，或者更糟糕的是 - 部分显示/根本不显示 - 在初始加载时。刷新一两个页面后，它开始按预期运行（可能是因为它从缓存中加载图像）。

禁用动画后，图像在初始加载时显示正常。

Demo
Source code

你知道为什么 Safari 会这样吗？

【问题讨论】：

在我的 Macbook 上自己在 Safari 12.1 上测试过，但似乎工作得很好？
确保打开检查器并在网络选项卡上禁用缓存（垃圾桶旁边的图标）。同时清空缓存（开发 > 空缓存）。对我来说，它可以正确加载图像，但不会对其进行动画处理（iOS 的行为不同，更古怪）。

标签： css safari webkit css-animations

【解决方案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';

【讨论】：