Анимация нечетная в локальной среде iOS 8

Question

Привет У меня есть страница проекта, которая состоит из трех карт, которые перелистывают разные времена один за другим.

Это прекрасно работает в каждом мобильном браузере, но IOS Safari < 8,1

Забавно, что если я получу свой выделенный код и поместить его на codepen, то попробуйте что 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 вы можете увидеть, как это выглядит на моем местном env. (Кстати, я раздел мою страницу, чтобы содержать только карту, также удаляется все с точки зрения, я использую handlebars.js)

Любую идею или помощь, что может быть причиной?

Answer 1

Попробуйте удалить perspective: 300 из всех текущих преобразований и добавить:

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

Я не могу проверить это на данный момент сам, так как у меня нет устройства с iOS8, но это путь Я обычно делаю это (и у меня никогда не было проблем с iOS8 раньше), и если вы google для «ios 8 view bug css», также, похоже, есть и другие люди, у которых возникают проблемы с переходами на iOS8 при использовании перспективы в рамках преобразования (хотя я не мог найти ясного примера любого сообщения, содержащего ту же самую проблему).