javascript - 键盘使用后 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. */
}

前景元素似乎不再闪烁，但背景仍然闪烁。仍在寻找有关 Mobile Safari 的内存处理策略的一些帮助或有用的资源。

更新 1/16 @ 11pm

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

1 月 17 日上午 8:30 更新

我已经发布了问题的演示 here .

屏幕之间的转换效果很好……直到您在其中一个表单域内点击/单击。键盘向上滑动返回后，所有的过渡都闪烁。转到 iOS 模拟器或实际 iPad 上的 URL，看看我在说什么。

Answer 1

这是一个老问题，但我想我会分享我的经验。

我在 iPad(以及 iPhone，但在那种情况下仅在纵向 View 中)上遇到了异常闪烁(在 css3 动画上)的问题。我能够通过设置完全解决所有闪烁问题:

-webkit-perspective: 0; 

在动画元素上。我不确定为什么会这样，但确实如此(在 iOS 4.2+、iPad(1 和 2)和 iPhone 4 上测试过)。

更新:当将该属性的值设置为 1 时，我刚刚意识到 Chrome 的一个问题。当它为 0 时它工作得很好，所以我已经适本地更新了上面的内容。