CSS 动画并不总是在 iOS 8 Safari 中开始

Question

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

幻灯片被放置在另一个容器中，它有自己的典型宽度，溢出：隐藏用于裁剪长照片条并防止它拉伸您的浏览器window。

#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%);
    }
}

我的问题：在iPhone5S和iPhone6Plus上仔细看了一下，好像有时候启动不了。它只会坐在那里。也许一段时间后会出现故障。如果我继续刷新，有时会运行，有时不会。似乎完全不一致。

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

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

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

Answer 1

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

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

傻

CSS 动画并不总是在 iOS 8 Safari 中开始

CSS animation not always starting in iOS 8 Safari

html

css

mobile-safari

ios

css-animations