動畫在iOS 8本地環境中看起來很奇怪

Question

你好，我有一個項目中的頁面，它由三張一張接一張地翻轉的卡片組成。

它的工作完全在每一個移動瀏覽器，但iOS的Safari瀏覽器< 8.1

有趣的是，如果我得到我的孤立的代碼，並把它放在一個codepen，然後嘗試在設備或模擬器（Xcode中），其codepen它期待權，但在我的本地環境中都能跟得上

這裏是codepen

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

CODE

.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的麻煩），如果你谷歌的「ios 8透視bug css」似乎還有其他人在轉換iOS8時遇到麻煩，同時在轉換中使用透視財產（儘管我找不到包含完全相同問題的任何帖子的明確示例）。