Forums

This topic contains 4 replies, has 2 voices, and was last updated by  Shikkediel 11 months, 1 week ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #266049

    jk1732hsu
    Participant

    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

    #266075

    jk1732hsu
    Participant

    and it only seems to happen with the img element

    #266083

    Shikkediel
    Participant

    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.

    #266112

    jk1732hsu
    Participant

    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 !

    #266784

    Shikkediel
    Participant

    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.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star