键盘使用后,iPad css3动画闪烁

Question

我正在使用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,0); }
 to { -webkit-transform: translate3d(-100%,0,0); }
}
@-webkit-keyframes slideleft-incoming{
 from { -webkit-transform: translate3d(100%,0,0); }
 to { -webkit-transform: translate3d(0%,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,0); /* This helps with the flicker a lot. */
}

解释器期望定义和表达式,而

/*************************************************
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,0); }
 to { -webkit-transform: translate3d(-100%,0,0); }
}
@-webkit-keyframes slideleft-incoming{
 from { -webkit-transform: translate3d(100%,0,0); }
 to { -webkit-transform: translate3d(0%,0,0); }
}

期望可以变成Java

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

文件.

Answer 1

最终，这个问题确实没有得到解决。iPad 上的 WebKit 中的表单元素似乎会导致闪烁问题。

我的解决方法是，在每个表单元素的 onblur 上，我使用哈希标签刷新页面，以确保其刷新到完全相同的状态。它在刷新时仍然会引起“闪烁”，但它确实阻止了屏幕在应用程序的其余部分闪烁。