html - CSS 动画并不总是在 iOS 8 Safari 中启动

Question

我制作了一个幻灯片，它通过将三个内联 block 彼此相邻(都具有相同的背景图像)放在一个幻灯片容器中，并使用 translateX 将该容器向左移动 33%/对，在循环之前。三个内联 block 几乎可以确保它看起来始终是连续的，并且您永远不会在每个屏幕上看到接缝。

幻灯片放映被放置在另一个容器中，它有自己的典型宽度，overflow: hidden 用于裁剪长照片条并防止它拉伸(stretch)浏览器窗口。

#container {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.slideshow {
    position: absolute;
    z-index: 5;
    top: 0;
    width: auto;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.slide {
    display: inline-block;
    height: 100%;
}

#about-slideshow {
    right: 0;
    -webkit-animation: slideshow-right 10s linear infinite;
    animation: slideshow-right 10s linear infinite;
}
#about-slideshow .slide {
    width: 964px;
    background: url('http://simplegrid.cochranesupply.com/images/slideshow-a.jpg') 0 0 repeat-x;
    background-size: 101%;
}

/* the animation */
@-webkit-keyframes slideshow-right {
    from {
        -webkit-transform: translateX(0);
    }
    to { 
        -webkit-transform: translateX(33.33333333333%);
    }
}
@keyframes slideshow-right {
    from {
        transform: translateX(0);
    }
    to { 
        transform: translateX(33.33333333333%);
    }
}

我的问题:在一台iPhone 5S和iPhone 6 Plus上仔细查看后，似乎有时无法启动。它只会坐在那里。也许一段时间后会出现故障。如果我继续刷新，它有时会运行，有时不会。看起来完全不一致。

关于可能导致此问题的任何想法？看起来很简单。

这是我确认在 iOS Safari 上显示问题的 CodePen:http://codepen.io/arickle/pen/pvGJBM

这是在 iOS 设备上拉出进行测试的全屏 View (请记住，一直刷新直到它停止——您不必特别快地刷新或进行任何其他操作):http://codepen.io/arickle/full/pvGJBM/

Answer 1

好吧，我似乎至少偶然发现了一个解决方法。显然，如果移动版 Safari 在加载过程中出现任何问题，或者无法跟上，或者 某些，它不会启动动画。我的解决方案只是将动画延迟 0.1 秒。这让浏览器有足够的时间来加载所有内容，然后每次都启动动画。

-webkit-animation: slideshow-right 10s 0.1s linear infinite;

傻。