Переходы с помощью телефонной пересылки на CSS-преобразованиях не отображаются.

Question

У меня возникли проблемы с переходом CSS на телефонную разборку. Мы переходим к свойству transform: translate3d, чтобы просматривать контент и просматривать его, а также скользить, чтобы открыть боковую панель.

Вот пример веб-приложение (отметим, что переходы работают в браузере): http://ferriesapp.ca/app/

Вы увидите, что переходы работают отлично в браузере и на телефоне и на рабочем столе. Но как только я «закрою телефон», переходы просто не отображаются. Появится последнее положение, например, если я попал в элемент отправителя, он отобразит соответствующие элементы списка отправлений. Но по какой-то причине анимация просто не происходит по разрыву в телефоне. Единственное исключение заключается в том, что он работает на iOS7 при передаче через телефонную развязку, но не на iOS 6 или на любую версию Android.

Вот небольшой фрагмент кода:

Вот что CSS на выдвижном элементе выглядит

#depart-content { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    transform: translate3d(0,0,0); 
    -webkit-transform: translate3d(0,0,0); 
    -moz-transform: translate3d(0,0,0); 
    -ms-transform: translate3d(0,0,0); 
    -o-transform: translate3d(0,0,0); 
} 

Вот класс анимации:

.animate { 
    transition: transform 0.2s ease-out; 
    transition: -webkit-transform 0.2s ease-out; 
    transition: -moz-transform 0.2s ease-out; 
    transition: -ms-transform 0.2s ease-out; 
    transition: -o-transform 0.2s ease-out; 
} 

И, наконец, JS который называет это (обратите внимание, что это не вся функция):

$("#depart-content").css({"transform":"translate3d(-100%,0,0)","-webkit-transform":"translate3d(-100%,0,0)","-moz-transform":"translate3d(-100%,0,0)","-o-transform":"translate3d(-100%,0,0)","-ms-transform":"translate3d(-100%,0,0)"}); 

Если у кого-то есть предложения, они были бы очень благодарны

Спасибо!

P.S. Я знаю, что правило CSS3 @keyframes работает очень хорошо, но я бы предпочел избежать этого для простоты кода

Answer 1

Ваше заявление об этом, работающем на iOS7, но не на iOS6, заставляет меня думать, что это происходит из-за к вашему заявлению translate3d.

Я предполагаю, что вы положили в этой строке, чтобы включить аппаратное ускорение -

transform: translate3d(0,0,0); 

Однако, есть несколько reports, что это не Infact триггер аппаратного ускорения в устройствах IOS 6.

В статье, которую я цитировал, автор упоминает, что использование любой из следующих команд приведет к ускорению аппаратного ускорения.

-webkit-transform: translateZ(0); 
-webkit-perspective: 1000; 
-webkit-backface-visibility: hidden;