对大图像进行动画处理无法在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';