Question

我在网站上为图片创建了一个纯CSS滑块。我使用了一些我在stackoverflow上找到的代码，但是我遇到了一个奇怪的问题。在Safari中，图像不会出现在我的屏幕上。代码在所有其他浏览器中都可以正常工作，但在Safari上检查元素时，图像标记是正确的，图像的尺寸是正确的。我可以单击图像URL并在Web检查器中查看图像，也可以在新选项卡中打开每个图像。我还在Safari中单独测试了代码段，它运行正常（请参阅此小提琴https://jsfiddle.net/mvtyofup/）

有人知道为什么Safari会阻止图像显示吗？

这是我的HTML

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

更新：当我删除CSS中的不透明度：0时，图片显示正确，幻灯片显示正常。由于幻灯片之间没有中断，因此会产生一些不良影响。也许还有另一种方法可以让它在不透明的情况下工作。

纯CSS滑块不在Safari中显示图像

0 个答案: