Проблемы webkit translate3d (peek-thru)

Я создаю приложение для iOS с PhoneGap. Я использую CSS-анимацию translate3d для создания эффекта «переворота».

Это отлично работает с более простыми элементами ... DIV с передним / задним разделами и, возможно, с дополнительным диапазоном или двумя.

Но когда я пытаюсь перевернуть более крупный элемент ... а именно весь экран, я перерисовываю глюки. Что происходит, как только я заменяю класс css, чтобы начать переход, части «нижнего» div выскакивают через «верхний» div, затем происходит переворот, затем они снова всплывают. И это не весь элемент, который просвечивает ... это половина элемента, разделенного вдоль оси, на которой я выполняю трехмерное вращение.

Какие-нибудь идеи или теории относительно того, что может быть причиной этого? То же самое происходит как на iPad в качестве приложения, так и на рабочем столе в Safari, поэтому, похоже, это проблема с веб-набором.

Может быть, проблемы с CSS? Или пытается выполнить полноэкранное вращение translate3d со сложными вложенными элементами с большими фоновыми изображениями, с которыми Safari не справляется?

ОБНОВЛЕНИЕ 1:

Я добился прогресса в сужении проблемы.

Что происходит то, что элементы, которые «выглядывают сквозь», когда я выполняю переворот translate3d, оказываются дочерними элементами, которые ранее были позиционированы с помощью translate3d.

Моя структура «страницы», которую я хочу переместить с помощью translate3d:

<div id="frontbackwrapper">
    <div id="front">    
    </div><!--/front-->
    <div id="back">  
    </div><!--/back-->
</div><!--/frontbackwrapper-->  

Это работает самостоятельно. Передний блок заменяется задним блоком с эффектом переворачивания карты.

Проблема в том, что перед тем, как выполнить полное перелистывание страницы, я уже анимировал некоторые элементы в div #front с помощью translate3d:

<div id="frontbackwrapper">
    <div id="front">  

        <div class="modal"></div>  

    </div><!--/front-->
    <div id="back">  
    </div><!--/back-->
</div><!--/frontbackwrapper--> 

Пример CSS:

.modal {
    width: 800px;
    height: 568px;
    position: absolute; 
    left: 112px;
    z-index: 100;
    -webkit-transition-duration: 1s;
    -webkit-transform: translate3d(0,-618px,0); /* set off screen by default */
 }
.modal.modalOn {
    -webkit-transform: translate3d(0,80px,0); /* slides the div into place */
 }

If - вместо с помощью translate3d - я просто перемещаю div с помощью стиля top или преобразую свойство top , у меня не возникает проблемы с просмотром. Конечно, это означает, что я должен отказаться от гладкой анимации или аппаратного ускорения соответственно.

На данный момент это похоже на ошибку webkit. Я продолжу немного поиграть с этим. Если кто-то сталкивался с этим раньше и нашел обходной путь, я все слышу!