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:
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 :)
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.