Ensure that the image in the slide show is preloaded, followed by preloading each additional image before transitioning to the next key frame. Finally, preload the original image for the final display. I even attempted changing the last image, but encountered no errors in the console.
#slideShow{
overflow-x:hidden;
background-attachment: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
width:100%;
height: 100%;
background-size: cover;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-webkit-animation: webkit-slideShow 30s 0.1s linear infinite;
-moz-animation: moz-slideShow 30s 0.1s linear infinite;
-o-animation: o-slideShow 30s 0.1s linear infinite;
-ms-animation: ms-slideShow 30s 0.1s linear infinite;
animation: slideShow 30s 0.1s linear infinite;
animation-timing-function: ease-in-out;
background-image: url("../img/s2ks-054.png");
}
@keyframes slideShow{
...animation properties...
}
@-ms-keyframes slideShow{
...animation properties...
}
@-webkit-keyframes webkit-slideShow{
...animation properties...
}
@-moz-keyframes moz-slideShow{
...animation properties...
}
@-o-keyframes o-slideShow{
....animation properties...
}
then in the html I have:
<div id="slideShow">
header body footer etc
</div>
This setup functions correctly on desktop and laptop browsers, except for iOS Safari.