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

Question

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

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

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

Demo Source code

任何想法为什么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';