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

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

解决方法 这是一个老问题，但我以为我会分享我的经验。

在iPad上(以及iPhone，但在这种情况下只能在纵向视图中)，我一直存在着令人愤慨的闪烁(在CSS3动画上)的问题。我能够通过设置完全解决所有闪烁的问题：

-webkit-perspective: 0;

在动画元素上。我不知道为什么这样做，但它(在iOS 4.2，iPad(1和2)和iPhone 4上测试)。

更新：在将该属性的值设置为1时，我已经意识到Chrome的问题。当它为0时，它的工作原理很好，所以我已经适当地更新了上述内容。

总结

以上是内存溢出为你收集整理的javascript – iPad css3动画在键盘使用后闪烁全部内容，希望文章能够帮你解决javascript – iPad css3动画在键盘使用后闪烁所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。