'Some issues loading some images in keyframe slide show on IOS

Preload the image in the slide show then preload each additional image before the next key frame and then finally preload the original image that I started with for the final image. Even tried changing the last image to something else and it fails no error in 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{
    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 in the html I have:

  <div id="slideShow">
header body footer etc
  </div>

Works fine on desktop/laptop but not in IOS safari

cssiossafarislideshowkeyframe


Solution 1:[1]

  1. I took out the extra background-size: cover;
  2. Added a second preload to background-image:url in the #slideshow to background-image: url("../img/s2ks-054.png");
  3. It works (on safari) 4)had to add body { background-size: cover; background-repeat: no-repeat; background-position: center center; background-image: url(../img/work/4.jpg); }

to body as well.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions