键盘使用后iPad css3动画闪烁答案

【问题标题】：iPad css3 animation flickers after keyboard use键盘使用后iPad css3动画闪烁
【发布时间】：2011-01-10 21:35:55
【问题描述】：

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

按照anonymous 的建议增加z-index。好像没什么区别。

更新 1/17 @ 8:30am

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

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

【问题讨论】：

我仍在寻找任何有用的建议！
为可以帮助我解决问题的人开始赏金。

标签： javascript ipad css cordova

【解决方案1】：

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

我在 iPad（以及 iPhone，但在这种情况下仅在纵向视图中）上遇到了令人发指的闪烁（在 css3 动画上）的问题。通过设置，我能够完全解决所有闪烁问题：

-webkit-perspective: 0;

关于正在动画的元素。我不确定为什么会这样，但确实有效（在 iOS 4.2+、iPad（1 和 2）和 iPhone 4 上测试过）。

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

【讨论】：

【解决方案2】：

查看您的源代码，直到转换开始才应用 translate3d(0,0,0)？

试试

.screen{
    -webkit-transform: translate3d(0,0,0);
}

或

.screen *, .screen{
        -webkit-transform: translate3d(0,0,0);
}

闪烁可能是硬件加速启动（目前仅适用于 3d 转换元素）。

【讨论】：

我原本只有 translateX 而不是 translate3d；我更改为 translate3d 以启用硬件加速，但无论哪种方式，它都会闪烁。但是，只有在使用键盘之后才能正常工作。
有趣的是，你的第一个建议 .screen{ -webkit-transform: translate3d(0,0,0);确实改善了传出屏幕上的闪烁。第二个建议使情况变得更糟-我怀疑是因为每个元素需要多少内存 -webkit-transform: translate3d.
好，现在完美还是还需要一些调整？
如果它是完美的，你可以在传出时尝试-webkit-transform: translate3d(0,0,0);，在传入时尝试-webkit-transform: translate3d(100%,0,0);。

【解决方案3】：

我遇到了同样的问题，但通过应用此处和此处描述的修复程序，我能够将闪烁减少到几乎不明显：

http://code.google.com/p/jqtouch/issues/detail?id=301

https://github.com/senchalabs/jQTouch/issues/issue/130

基本上将您要移出的页面的 z-index 设置为 -1 并在过渡后返回 1

【讨论】：

我尝试在左滑和右滑上将 .outgoing 的 z-index 更改为 -1，但在我的情况下它没有修复（甚至减少）闪烁。

【解决方案4】：

我知道这是一个恐龙老问题，但是这个问题有一个解决方案，它非常轻量级且非常简单。

document.getElementById('clicked_input').addEventListener('focus', function(e){
    e.stopPropagation();
},false);

当我也在处理这个问题时，我以为我尝试了所有方法 - 最终唯一有帮助的是在应用程序的容器 div 之外创建一个模态窗口（位置：绝对），并将应用程序的容器 div 设置为显示：假；当键盘出现时。虽然它的工作很丑陋，但我测试了一切以查看导致事件的原因，似乎当“焦点事件”冒泡时，每个 3d 变换都被搞砸了（在闪烁和性能方面）。

防止冒泡事件完全解决了这个问题 - 令人难以置信的是，如此讨厌的错误竟然有如此简单的解决方案？

【讨论】：

这是一个非常吸引人的想法——我会记住这一点，以便下次尝试（当然，使用 iOS5，谁知道 WebKit 会发生什么变化）。

【解决方案5】：

你不会喜欢我这样说的，但 JavaScript 可能是你正在寻找的答案。我担心当您打开键盘时，呈现 HTML 的过程会失去优先权。随着脚本不断更新，例如setInterval 循环，iPad 将别无选择，只能按计划进行渲染。显式代码不需要 hack。

【讨论】：

我可能误解了你的意思——但在这种情况下，我没有使用任何类型的 setInterval 或 setTimeout——我完全依赖 CSS 转换来制作动画。这些转换在 iPad 上是硬件加速的。在闪烁附近出现的唯一 JavaScript 只是添加一两个类。
为了清楚起见，即使在键盘返回很长时间后也会出现闪烁。
我的意思是，问题可能在于您没有使用 JavaScript。 CSS 留给浏览器异步渲染，这会产生很大的错误窗口。在您的情况下，Safari 存在导致闪烁的冲突事件，尽管可能会对性能造成轻微影响，但如果您控制菜单/小部件/滑块或使用 JavaScript 调用的任何内容，您将消除闪烁。
我的印象是 CSS3 转换允许浏览器重新绘制而无需渲染；正因为如此，CSS 转换总是会比使用 JavaScript 的任何东西提供更好的结果，因为那些需要渲染。即使键盘早已消失，“冲突事件”会是什么？我会试一试 JavaScript，看看它是否有帮助。
对不起，我误解了整件事。我以为这是关于 CSS 动画的。这是CSS3D？你有一个 zbuffering 问题。我会说增加你正在使用的单位的大小。让一切变得更远。

【解决方案6】：

我同意 Ben 的观点，您可能也应该在类本身上设置转换：

/*************************************************
Slide Left
*************************************************/
.screen.slideleft{
 -webkit-animation-duration: 0.5s;
 -webkit-animation-timing-function: ease-in-out;
 -webkit-transform: translate3d(0,0,0);
}
.screen.slideleft.outgoing{
 z-index: 50 !important;
 -webkit-animation-name: slideleft-outgoing;
 -webkit-transform: translate3d(-100%,0,0);
}
.screen.slideleft.incoming{
 z-index: 100 !important;
 -webkit-animation-name: slideleft-incoming;
 -webkit-transform: translate3d(0,0,0);
}
@-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); }
}

如果这不起作用，我很想测试是否只有用translateX(-100%) 翻译 X 才能解决问题。（不一定是修复，因为没有 3D 变换就没有硬件加速，但有助于缩小问题范围。）

【讨论】：

其实我原来是把它当成 translateX 的，然后改成 translate3d 来启用硬件加速。无论哪种方式，它都没有改变。我尝试添加 translate3d 并移动其他人，但收效甚微。请参阅我对 Ben 的建议的评论。

【解决方案7】：

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

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

【讨论】：

【解决方案8】：

我最近遇到了同样的问题，并尝试了各种复杂的修复方法。最后我发现问题出在输入的默认样式上。我通过添加 css input{outline:none} 解决了我的问题。它可能只是在焦点状态，所以input:focus{outline:none;} 应该可以工作。

【讨论】：