CSS 动画无法按预期在 Safari 中使用图像元素

Question

下面是我在 Safari 中遇到的错误的最小模型。

---

预期行为:代码应该在加载另一个图像时显示占位符，然后在移除占位符时淡入该图像。

placeholder -> fading in loaded image

实际行为:在 Chrome 和 Mozilla 中按预期工作，但在 Safari 中失败，导致以下效果:

placeholder -> white screen -> loaded image

有人可以帮我弄清楚为什么在 Safari 中会发生这种情况吗？ (尝试在 chrome 或 mozilla 与 safari 中运行下面的示例以亲眼看看。)

const image = new Image();

image.onload = () => {
  document.getElementById('placeholder').remove();

  const el = document.createElement('img');
  el.setAttribute('src', 'http://deelay.me/1000/https://cdn.pixabay.com/photo/2014/06/03/19/38/board-361516_1280.jpg');
  el.setAttribute('width', '150');
  el.setAttribute('height', '150');

  el.style = `
    animation-name: testAnimation;
    animation-duration: 0.3s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    background: red;
  `;

  document.body.appendChild(el);
}

image.src = 'http://deelay.me/1000/https://cdn.pixabay.com/photo/2014/06/03/19/38/board-361516_1280.jpg';

#placeholder {
  background: #eee;
}

@-webkit-keyframes testAnimation {
  0% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

<img id="placeholder" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'200' height%3D'300' viewBox%3D'0 0 200 300'%2F%3E" width="150" height="150">

(

另一个奇怪的行为是如果 animation-duration增加到大约 3-4 秒，然后图像淡入但白屏仍然存在，即

placeholder -> white screen -> fading in loaded image

)

更新:

在尝试了 img 的背景颜色之后，在 Safari 中，动画似乎在图像开始渲染到屏幕前 1 秒左右开始生效。

• 因此，如果真实图像没有像占位符图像那样的背景颜色，则会出现白色闪烁，因此为什么在向真实图像添加背景颜色后，背景颜色甚至在图像开始显示之前大约 1 秒就变得可见
• 因此淡入淡出效果在图像开始显示之前大约 1 秒开始出现

而在 Chrome 和 Mozilla 中，动画似乎与图像完美同步。

运行更新的代码亲眼看看

(它似乎也只发生在 <img> 上，我用其他一些元素(仍在 image.onload 中)对其进行了测试，它们按预期工作。)

更新 2:请参阅下面答案中的修复以及解释

Answer 1

这是通过添加另一个 onload 解决的这次事件发生在图像元素 而不是显式图像对象 并将image.onload里面的听众。

这似乎表明在 Safari 中，一旦 <img> 就会应用动画和样式。被添加到 DOM - 在它完全加载之前(它的 onload 事件被调用。)

• 这可以通过给出 <img> 来测试背景颜色，一旦元素被添加到 DOM 就会看到它与动画一起显示，并且看到它需要额外的一秒钟直到图像本身变得可见

• 您还可以在不使用任何动画的情况下看到同样的效果，只需提供 <img> 即可。背景色

(Safari 中的错误？ 我的 Safari 版本:版本 11.0.2 (13604.4.7.1.3))

编辑: 实际上问题似乎是由缓存引起的，Safari 似乎没有缓存预加载的代理图像，而其他浏览器却缓存了它。 Safari 似乎在将图像呈现到屏幕时触发对该图像的另一个请求 - 因此样式在看到实际图像之前是可见的，因为图像仍在下载中。

编辑 2:经过进一步调查，Safari 似乎实际上是这 3 个浏览器中唯一按预期运行的浏览器 - 这是因为图像的 HTTP 响应包含 Cache-Control: no-cache, must-revalidate header 明确指示浏览器不缓存图像。

const image = new Image();
    
const el = document.createElement('img');
el.setAttribute('src', 'http://deelay.me/500/https://cdn.pixabay.com/photo/2014/06/03/19/38/board-361516_1280.jpg');
el.setAttribute('width', '150');
el.setAttribute('height', '150');
el.style = `
  animation-name: testAnimation;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  background-color: red;
`;
    
el.onload = () => {
  image.onload = () => {
    document.getElementById('placeholder').remove();
    document.body.appendChild(el);
  }
}

image.src = 'http://deelay.me/500/https://cdn.pixabay.com/photo/2014/06/03/19/38/board-361516_1280.jpg';

#placeholder {
  background: #eee;
}

@-webkit-keyframes testAnimation {
  0% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

<img id="placeholder" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'200' height%3D'300' viewBox%3D'0 0 200 300'%2F%3E" width="150" height="150">