1

Background:

I'm working with HTML/CSS image slideshows. I have a method that achieves a slideshow well using just HTML and CSS (code below).

One issue is that the image slideshow is not working in Safari on iOS 7, only the first image in the series is displayed.

However, if I add the below JavaScript reference, the image slideshow starts working in iOS 7 Safari almost as great as it does on iOS 10 Safari.

<script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script>

But why?

Questions:

  1. What precisely is contained in the JavaScript reference above that allows the image slideshow to work on iOS 7 Safari?

  2. Is there a more compact JavaScript-free CSS alternative that will work on iOS 7 Safari?

  3. If there is no CSS alternative that will work on iOS 7 Safari, what is the most compact JavaScript that will get the slideshow animating on iOS 7 Safari?

Thanks.

Code:

<!DOCTYPE html>
<html class=''>
<head>
<!--<script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script>-->
<style>
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body { margin: 0; } 
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 20s slidy infinite; 
}
</style>
</head>
<body>
<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="slider">
<figure>
<img src="austin-fireworks.jpg" alt>
<img src="taj-mahal_copy.jpg" alt>
<img src="austin-fireworks.jpg" alt>
<img src="ankor-wat.jpg" alt>
<img src="austin-fireworks.jpg" alt>
</figure>
</div>
</body>
</html>
user4806509
  • 2,925
  • 5
  • 37
  • 72
  • 1
    iOS 7 requires keyframe animations to be prefixed ie. `@-webkit-keyframes`. the library you imported does this for you. If you don't want to use the library, just create a prefixed version within your CSS. – Turnip Apr 02 '17 at 19:55
  • Thanks! But sorry, what is "prefixed" exactly and how can I create a prefixed version within the CSS? What do I need to do to the CSS code to make it prefixed? – user4806509 Apr 02 '17 at 20:28
  • 1
    See this question: http://stackoverflow.com/questions/20518670/css-keyframe-animations-for-all-browsers. Notice how the user duplicates their animation adding a prefix to the word "keyframe" for each of the browser vendors. This is to support older browsers that aren't using the finalised version of the keyframe css specification. Also read this: https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix – Turnip Apr 02 '17 at 20:32
  • Thanks, a lot. I'm vaguely familiar and will read further. Appreciate it! – user4806509 Apr 02 '17 at 21:12

0 Answers0