css – Some points loading some photographs in keyframe slide present on IOS

Preload the picture within the slide present then preload every extra picture earlier than the subsequent key body after which lastly preload the unique picture that I began with for the ultimate picture. Even tried altering the final picture to one thing else and it fails no error in console.

#slideShow{
  overflow-x:hidden;
  background-attachment: cowl;
  -webkit-background-size: cowl;
  -moz-background-size: cowl;
  -o-background-size: cowl;
  width:100%;
  peak: 100%;
  background-size: cowl;
  background-position: heart heart;
  background-size: cowl;
  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{
    0% {
      background-image: url("../img/s2ks-054.png"), url("../img/s2ks-022.png")
    }
    15% {
      background-image: url("../img/s2ks-022.png"), url("../img/Jin-60.jpeg")
    }
    30%{
      background-image: url("../img/Jin-60.jpeg"), url("../img/Jin-65.jpeg")
    }
    55%{
      background-image: url("../img/Jin-65.jpeg"), url("../img/s2ks-022.png")
    }
    75%{
      background-image: url("../img/s2ks-022.png"), url("../img/s2ks-127.png")
    }
    100%{
      background-image: url("../img/s2ks-127.png"), url("../img/s2ks-054.png")
    }
  }
  @-ms-keyframes slideShow{
    0% {
      background-image: url("../img/s2ks-054.png"), url("../img/s2ks-022.png")
    }
    15% {
      background-image: url("../img/s2ks-022.png"), url("../img/Jin-60.jpeg")
    }
    30%{
      background-image: url("../img/Jin-60.jpeg"), url("../img/Jin-65.jpeg")
    }
    55%{
      background-image: url("../img/Jin-65.jpeg"), url("../img/s2ks-022.png")
    }
    75%{
      background-image: url("../img/s2ks-022.png"), url("../img/s2ks-127.png")
    }
    100%{
      background-image: url("../img/s2ks-127.png"), url("../img/s2ks-054.png")
    }
  }

  @-webkit-keyframes webkit-slideShow{
      0% {
        background-image: url("../img/s2ks-054.png"), url("../img/s2ks-022.png")
      }
      15% {
        background-image: url("../img/s2ks-022.png"), url("../img/Jin-60.jpeg")
      }
      30%{
        background-image: url("../img/Jin-60.jpeg"), url("../img/Jin-65.jpeg")
      }
      55%{
        background-image: url("../img/Jin-65.jpeg"), url("../img/s2ks-022.png")
      }
      75%{
        background-image: url("../img/s2ks-022.png"), url("../img/s2ks-127.png")
      }
      100%{
        background-image: url("../img/s2ks-127.png"), url("../img/s2ks-054.png")
      }
    }

    @-moz-keyframes moz-slideShow{
      0% {
        background-image: url("../img/s2ks-054.png"), url("../img/s2ks-022.png")
      }
      15% {
        background-image: url("../img/s2ks-022.png"), url("../img/Jin-60.jpeg")
      }
      30%{
        background-image: url("../img/Jin-60.jpeg"), url("../img/Jin-65.jpeg")
      }
      55%{
        background-image: url("../img/Jin-65.jpeg"), url("../img/s2ks-022.png")
      }
      75%{
        background-image: url("../img/s2ks-022.png"), url("../img/s2ks-127.png")
      }
      100%{
        background-image: url("../img/s2ks-127.png"), url("../img/s2ks-054.png")
      }
    }

    @-o-keyframes o-slideShow{
      0% {
        background-image: url("../img/s2ks-054.png"), url("../img/s2ks-022.png")
      }
      15% {
        background-image: url("../img/s2ks-022.png"), url("../img/Jin-60.jpeg")
      }
      30%{
        background-image: url("../img/Jin-60.jpeg"), url("../img/Jin-65.jpeg")
      }
      55%{
        background-image: url("../img/Jin-65.jpeg"), url("../img/s2ks-022.png")
      }
      75%{
        background-image: url("../img/s2ks-022.png"), url("../img/s2ks-127.png")
      }
      100%{
        background-image: url("../img/s2ks-127.png"), url("../img/s2ks-054.png")
      }
    }

then within the html I’ve:

  <div id="slideShow">
header physique footer and so on
  </div>

Works nice on desktop/laptop computer however not in IOS safari