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

Question

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

幻灯片放置在另一个自己的容器中,典型宽度和溢出:隐藏用于裁剪长照片条并防止它拉伸浏览器窗口.

#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上彻底查看后,它似乎有时无法启动.它只会坐在那里.一段时间后可能会出现故障.如果我继续刷新,它有时会运行,有时不运行.似乎完全不一致.

关于可能导致这种情况的任何想法？看起来很简单.

这是我已经确认的CodePen在iOS Safari上显示的问题: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;

愚蠢.