我正在使用 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,看看我在说什么。
最佳答案
这是一个老问题,但我想我会分享我的经验。
我在 iPad(以及 iPhone,但在那种情况下仅在纵向 View 中)上遇到了异常闪烁(在 css3 动画上)的问题。我能够通过设置完全解决所有闪烁问题:
-webkit-perspective: 0;
在动画元素上。我不确定为什么会这样,但确实如此(在 iOS 4.2+、iPad(1 和 2)和 iPhone 4 上测试过)。
更新:当将该属性的值设置为 1 时,我刚刚意识到 Chrome 的一个问题。当它为 0 时它工作得很好,所以我已经适本地更新了上面的内容。
关于javascript - 键盘使用后 iPad css3 动画闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4651769/