Safari @keyframes starts around 1s before the image is rendered

[jk1732hsu]

Can somebody please help me figure this out?

I’m having an issue with @keyframes in Safari, it seems like the animation is around 1second out of sync compared to the image it is applied onto – i.e. animation fires 1sec before the image even renders. This only happens in Safari, works in Chrome and Mozilla.

Please see my stackoverflow post detailing this issue with runnable code:

https://stackoverflow.com/questions/48467175/keyframes-animation-not-working-in-safari

[jk1732hsu]

and it only seems to happen with the img element

[Shikkediel]

Why wouldn’t you just append the already loaded image? Can’t see why a second item is needed.

const image = new Image();

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

  this.setAttribute('width', '150');
  this.setAttribute('height', '150');

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

  document.body.appendChild(this);
}

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

Apparently Safari isn’t aware of caching…

Edit – the forum doesn’t seem to process the arrow well.

[jk1732hsu]

Hi, thanks for the reply.

You’re right, I guess the reason for creating that additional image is because this isn’t the real code, it was written just to highlight the issue.

As far as the issue, you’re saying that it is caused by Safari not utilising the pre-loaded image and instead firing another network request to get that image again when is added to the DOM? After checking the network tab I think you’re right :) (Seems to cache regular images and fail only when image is proxied through the deelay service?)

Could you please confirm if my understanding of your answer is correct :)

Thanks !

[Shikkediel]

Indeed, the only conclusion I could draw is that the browser made another request to download the image without using the already cached version. Not having Safari to confirm it with dev tools myself, it was only theoretical but seemed to be the most obvious explanation.

[Author]

Posts