gpt4 book ai didi

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

转载 作者:可可西里 更新时间:2023-11-01 01:19:24 24 4
gpt4 key购买 nike

我正在使用 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com