Below is a minimum mockup of a bug that I'm experiencing in Safari.
Expected behaviour: The code is supposed to display a placeholder while another image loads and then fade-in that image while removing the placeholder.
placeholder -> fading in loaded image
Actual behaviour: Works as expected in Chrome and Mozilla but fails in Safari, resulting in the following effect:
placeholder -> white screen -> loaded image
Can somebody help me figure out why this is happening in Safari please? (try running below example in chrome or mozilla vs safari to see for your self.)
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">
(
Another weird behaviour is that if animation-duration gets increased to around 3-4 seconds then the image does fade-in but the white screen is still there, i.e.
placeholder -> white screen -> fading in loaded image
)
update:
After playing around with img’s background color it seems like in Safari the animation begins taking effect around 1s before the image even begins getting rendered to the screen.
- hence the white flick if the real image doesn't have a background color like the placeholder image does and hence why after adding a background color to the real image that background color becomes visible around 1 sec earlier before the image even starts displaying
- and hence the fade effect starting to take place around 1 sec earlier before the image even starts displaying
Whereas in Chrome and Mozilla the animation appears to be perfectly in sync with the image.
Run updated code to see for yourself
(it also only seems to happen with <img>, I've tested it with some other elements (still inside of image.onload) and they work as expected.)