By utilizing a basic CSS animation, I've managed to create a fade-in effect that relies on opacity. To kickstart the animation, I use JavaScript to ensure it waits until the browser finishes loading. While this method works seamlessly on Firefox and Chrome, it encounters issues with Safari. Strangely enough, the animation functions properly on Safari when accessed locally, meaning from data stored on my computer! However, the problem arises when attempting to load website data from an external server using Safari.
I discovered that the animation also initiates correctly with an external server in play if I prompt Safari to display "web information" or activate the "responsive design" mode!
Despite testing on both Safari 9 and 11 (with cache cleared), I couldn't locate any existing discussions addressing this peculiar occurrence. Any insights would be greatly appreciated!
Here is the code snippet:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="stylesheet.css"/>
<script src="js-script.js"></script>
</head>
<body>
<main>
<div id="fading">
Test
</div>
</main>
</body>
</html>
The CSS for the animation:
#fading {
/* shorthand notation not always working with Safari */
-webkit-animation-name: fadein;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-play-state: paused;
-moz-animation: fadein 5s ease-in;
-moz-animation-play-state: paused;
-o-animation: fadein 5s ease-in;
-o-animation-play-state: paused;
animation: fadein 5s ease-in;
animation-play-state: paused;
}
@-webkit-keyframes fadein {
from { opacity: 0}
to { opacity: 1}
}
@-moz-keyframes fadein {
from { opacity: 0}
to { opacity: 1}
}
@-o-keyframes fadein {
from { opacity: 0}
to { opacity: 1}
}
@keyframes fadein {
from { opacity: 0}
to { opacity: 1}
}
And finally, the JS code:
"use strict";
function start() {
var fading = document.getElementById("fading");
fading.style.webkitAnimationPlayState = "running";
fading.style.mozAnimationPlayState = "running";
fading.style.oAnimationPlayState = "running";
fading.style.animationPlayState = "running";
}
window.onload = start;