iOS 8 本地环境下的动画看起来很奇怪

Question

您好，我有一个项目的页面，该页面由三张卡片组成，这些卡片依次翻转不同的时间。

它在每个移动浏览器中都能完美运行，但 iOS Safari < 8.1

有趣的是，如果我得到我的独立代码并将其放在代码笔上，然后在设备或模拟器 (Xcode) 上尝试该代码笔，它看起来是正确的，但在我的本地环境中不行

这是codepen

代码

.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 用于 "ios 8 perspective bug css"，似乎还有其他人在 iOS8 上使用转换属性中的透视时遇到转换问题]（尽管我找不到任何包含完全相同问题的 post 的明确示例）。

iOS 8 本地环境下的动画看起来很奇怪

Animation looking odd on iOS 8 local environment

css

safari

css-transforms

ios8.1