Флип анимации работает хорошо в Chrome, но не в Safari

Question

У меня есть следующая скрипка: http://jsfiddle.net/mauricederegt/hy2dvL1u/43/

При открытии его в Chrome и нажмите на карте будет переворачивать и двигаться вправо. Выглядит хорошо в Chrome, но когда я это делаю в Safari (v9), анимация вроде бы засасывает (у нее есть обрезка и т. Д., Быстрее нажмите, чтобы увидеть беспорядок)

Часть CSS (см. скрипка):

/* entire container, keeps perspective */ 
.flip-container { 
    perspective: 1000; 
    transform-style: preserve-3d; 
} 
    /* UPDATED! flip the pane when .flipped class applied */ 
    .flip-container.flipped .back { 
     transform: rotateY(0deg); 
    } 
    .flip-container.flipped .front { 
     transform: rotateY(180deg); 
    } 

.flip-container, .front, .back { 
    width: 7.1428rem; 
    height: 10rem; 
} 

/* flip speed goes here */ 
.flipper { 
    transition: 200ms; 
    transform-style: preserve-3d; 

    position: relative; 
} 

Что мне не хватает? Почему в Safari так плохо отражается анимация?

С уважением,

пс. Я не использую -webkit- префикс, так как оно не должно быть нужно больше

Answer 1

попробовать это

/* entire container, keeps perspective */ 

.flip-container { 
    perspective: 1000; 
    -webkit-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
} 

/* UPDATED! flip the pane when .flipped class applied */ 
    .flip-container.flipped .back { 
    -webkit-transform: rotateY(0deg); 
    transform: rotateY(0deg); 
} 
.flip-container.flipped .front { 
    -webkit-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
} 

.flip-container, .front, .back { 
    width: 7.1428rem; 
    height: 10rem; 
} 

/* flip speed goes here */ 
.flipper { 
    -webkit-transition: 200ms; 
    transition: 200ms; 

    -webkit-transform-style: preserve-3d; 
    transform-style: preserve-3d; 

    position: relative; 
}