javascript – iPad css3动画在键盘使用后闪烁

我正在使用HTML5 / CSS3为iPad开发应用程序。我没有使用任何框架，只是使用本机支持的任何设备。我已经创建了一些css3动画来模拟在屏幕之间导航时，典型的iOS滑动左侧或滑动右侧。以下是幻灯片左侧动画的示例，它利用了iPad的CSS3硬件加速功能：(ipad正在运行4.2)。

/*************************************************
Slide Left
*************************************************/
.screen.slideleft{
 -webkit-animation-duration: 0.5s;
 -webkit-animation-timing-function: ease-in-out;
}
.screen.slideleft.outgoing{
 z-index: 50 !important;
 -webkit-animation-name: slideleft-outgoing;

}
.screen.slideleft.incoming{
 z-index: 100 !important;
 -webkit-animation-name: slideleft-incoming;
}
@-webkit-keyframes slideleft-outgoing{
 from { -webkit-transform: translate3d(0%,0); }
 to { -webkit-transform: translate3d(-100%,0); }
}
@-webkit-keyframes slideleft-incoming{
 from { -webkit-transform: translate3d(100%,0); }
 to { -webkit-transform: translate3d(0%,0); }
}

我也有这个我试图用来修复闪烁的CSS：

.incoming,.outgoing{
 display: block !important;
 -webkit-BACkface-visibility: hidden;
}

这个功能很棒，直到使用iPad键盘。之后，所有动画都会严重闪烁。

我一直在寻找使用键盘的iPad HTML5应用程序的例子，之后没有闪烁，但没有变得太多。 jqTouch演示在iPad上表现出相同的行为(尽管我知道他们是为iPhone设计的)。

我已经提出了一些类似问题的帖子/问题，但从未找到一个很好的答案。我已经通过http://css3animator.com/2010/12/fight-the-flicker-making-your-css3-animation-bomb-proof/和文章链接在那里，但没有取得任何成功。

任何其他建议？

更新1/13 @ 9am

我已经添加了这个CSS，它帮助很多：

.incoming *,.outgoing *{
 -webkit-BACkface-visibility: hidden;
 -webkit-transform: translate3d(0,0); /* This Helps with the flicker a lot. */
}

前景元素似乎没有闪烁，但背景依然如此。仍然寻找一些帮助或有用的资源在移动Safari的内存处理策略。

更新1/16 @ 11pm

增加匿名建议的z-index。似乎没有什么不同。

更新1/17 @ 8:30 am

我已经发布了一个问题here的演示。

屏幕之间的转换工作非常好，直到您点击/单击其中一个表单域。键盘滑出并返回后，所有的转换闪烁。转到iOS模拟器或实际iPad中的URL，看看我在说什么。

-webkit-perspective: 0;