动画在iOS 8本地环境中看起来很奇怪

Question

您好，我有一个项目页面，其中包含三张卡片，这些卡片一个接一个地翻转不同的时间。

它可以在每个移动浏览器中完美运行，但iOS Safari＆lt; 8.1

有趣的是，如果我得到我的孤立代码并将其放在codepen上，那么在设备或模拟器（Xcode）上尝试使用它看起来是正确的，但是在我的本地环境中没有

这是codepen

http://codepen.io/dannygm/pen/ONXWJj

代码

.silhouettes-container{margin:0 auto; padding: 0 16px 0 16px; text-align: center; width:100%;}

button{background: blue; color: #fff; padding: 20px;cursor:pointer;}

.flip-silhouette {display:inline-block; height:100px; position:relative; width:100px; z-index:1000;}

.flip-silhouette .front,
.flip-silhouette .back {display:block; height:100px; position:absolute; -webkit-backface-visibility:hidden; backface-visibility:hidden;  -webkit-transition:-webkit-transform 1s; transition:transform 1s; -webkit-transition:transform 1s; width:100px;}
.flip-silhouette .front {transform:perspective(300) rotateY(0); -webkit-transform:perspective(300) rotateY(0); z-index:900;}
.flip-silhouette .back {-webkit-transform:rotateY(-180deg); transform:rotateY(-180deg); z-index:800;}
.flipped .front {transform:rotateY(180deg); transform:perspective(300) rotateY(180deg); -webkit-transform:rotateY(180deg); -webkit-transform:perspective(300) rotateY(180deg);}
.flipped .back {z-index:950; transform:rotateY(0deg); -webkit-transform:rotateY(0deg); -webkit-transform:perspective(300) rotateY(0deg); transform:perspective(300) rotateY(0deg);}


.flipped .back1, .flipped .front1{transition-delay:0.8s; -webkit-transition-delay:0.8s;}
.flipped .back2, .flipped .front2{transition-delay:1s; -webkit-transition-delay:1s;}
.flipped .back3, .flipped .front3{transition-delay:1.2s; -webkit-transition-delay:1.2s;}

在这个GIF中你可以看到它在我当地的环境中的样子。 （顺便说一句，我剥离了我的页面只包含卡片，也删除了视图中的所有内容，我使用的是handlebars.js）

可能导致它的任何想法或帮助？

Answer 1

尝试从所有当前转换中删除perspective: 300并添加：

.silhouettes-container { 
    -webkit-perspective: 300;
    perspective: 300;
}

我现在无法测试它，因为我没有iOS8的设备，但这是我通常做的方式（我之前从未遇到过iOS8的麻烦），如果你google for“ios 8 perspective bug css”似乎还有其他人在转换属性中使用透视时在iOS8上遇到转换问题（尽管我找不到包含完全相同问题的任何帖子的明确示例）