2

I have created a pure CSS slider for images on my website. I used some code I found on stackoverflow, but I am experiencing a strange problem. In Safari, the images do not appear on my screen. The code works fine in all other browsers, but on Safari when I inspect the element, the image tag is correct and the dimensions of the image are correct. I can click the image url and view the image in the web inspector, and also when I open each image in a new tab. I have also tested the snippet alone in Safari, and it works correctly (See this fiddle https://jsfiddle.net/mvtyofup/)

Does anybody have a clue why Safari is preventing the images to show?

Here is my HTML 

.slider {
  margin: 10px auto;
  width: 500px;
  height: 320px;
  overflow: hidden;
  position: relative;
}
.photo {
  position: absolute;
  -webkit-animation: round 16s infinite;
  opacity: 0;
  width: 100%;
}
@-webkit-keyframes round {
  25% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}
img:nth-child(4) {
  -webkit-animation-delay: 0s;
}
img:nth-child(3) {
  -webkit-animation-delay: 4s;
}
img:nth-child(2) {
  -webkit-animation-delay: 8s;
}
img:nth-child(1) {
  -webkit-animation-delay: 12s;
}
<div class="slider">
  <img class='photo' src="http://farm9.staticflickr.com/8241/8562523343_9bb49b7b7b.jpg" alt="" />
  <img class='photo' src="http://farm9.staticflickr.com/8320/8035372009_7075c719d9.jpg" alt="" />
  <img class='photo' src="http://farm9.staticflickr.com/8465/8113424031_72048dd887.jpg" alt="" />
  <img class='photo' src="http://farm9.staticflickr.com/8517/8562729616_35b1384aa1.jpg" alt="" />
</div>

Update: When I removed the opacity:0 in the CSS for .photo, the images appear correctly and the slideshow works. There is a bit of undesired effect as there is no break in between slides any more. Maybe there is another way to get that working without opacity.

EricBellDesigns
  • 955
  • 1
  • 9
  • 33
  • so you are saying that in Safari the fiddle works correctly but in your project it doesn't work? – cocoa Sep 23 '15 at 19:12
  • Yes, that's correct. I have stripped out the nearly all of the surrounding code hoping that was the issue, but even when it is only this in between my header and footer, I still have the issue. – EricBellDesigns Sep 23 '15 at 19:13
  • can you post your header and footer code as well? that might help, i'm not sure – cocoa Sep 23 '15 at 19:16
  • I was hoping I wouldn't have to do that since it is a ton of code written in JSP and it actually calls several pages just to create the header and footers :/ – EricBellDesigns Sep 23 '15 at 19:26
  • 1
    It might be caused by another general or inherited CSS style. Maybe just add the class `.slider` before all the `img` declarations in the CSS so that it won't be a general styling rule? Also check with the inspector/developertool if there are any other CSS rules applying to the elements you use for the slider (better check all of them separately, also the wrappers...) – Oops D'oh Sep 23 '15 at 19:33
  • thank you @user1843159 I will give that a try today. I appreciate the insight! – EricBellDesigns Sep 23 '15 at 19:51
  • 1
    Found out that it has to do with the opacity:0 css line. If I remove that the images show and slideshow works. – EricBellDesigns Sep 23 '15 at 21:10
  • Check out [other](http://stackoverflow.com/questions/10924308/css-opacity-animation-safari-bug)(1) [questions](http://stackoverflow.com/questions/22648553/chrome-safari-opacity-transition-bug-creates-st)(2) about opacity bugs in safari, maybe you'll find a workaround there? – Oops D'oh Sep 24 '15 at 19:07

0 Answers0