Javascript 键盘使用后iPad css3动画闪烁

我正在使用HTML5/CSS3为iPad开发一个应用程序。我没有使用任何框架，只是使用设备上本机支持的任何东西。我创建了一些css3动画来模拟典型的iOS在屏幕之间左滑或右滑。下面是一个利用iPad CSS3硬件加速功能的左滑动画示例：（iPad运行的是4.2）

我还尝试使用这个CSS来修复闪烁：

新当选的
.外出{
显示：块！重要；
-webkit背面可见性：隐藏；
}

在使用iPad键盘之前，这项功能非常有效。之后，所有动画都会严重闪烁

我一直在寻找iPad HTML5应用程序的例子，该应用程序使用键盘，之后没有闪烁，但没有出现太多。jqTouch演示在iPad上表现出同样的行为（尽管我知道它们是为iPhone设计的）

我发现了一些类似问题的帖子/问题，但从未找到好的答案。我已经通过了链接，但没有任何成功的文章

还有其他建议吗

上午9点更新1/13

我添加了这个css，它帮助了很多：

.传入*，
.外出*{
-webkit背面可见性：隐藏；
-webkit transform:translate3d（0,0,0）；/*这对闪烁非常有帮助*/
}

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

下午11点更新1/16

按照anonymous的建议增加z索引。似乎没有什么不同

在上午8:30更新1/17

我已经发布了这个问题的演示

---

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

你不会喜欢我这样说，但JavaScript可能是你想要的答案。我担心当您打开键盘时，呈现HTML的过程会失去优先级。随着不断更新的脚本，如

setInterval

循环，iPad将别无选择，只能按计划渲染。显式代码不需要破解。

查看您的源代码，translate3d（0,0,0）在转换开始之前不会应用

试一试

或

---

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

我同意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变换就没有硬件加速，但这有助于缩小问题的范围。）

我也有同样的问题，但通过应用此处和此处描述的修复，我能够将闪烁减少到几乎不可察觉的程度：

---

基本上，将要移出的页面的z索引设置为-1，并在转换后返回到1

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

---

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

我最近也遇到了同样的问题，并尝试了各种复杂的修复方法。最后，我发现问题在于输入的默认样式。我通过添加css

input{outline:none}

修复了我的问题。这可能只是焦点状态，所以

input:focus{outline:none；}

应该可以工作

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

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

当我也在解决这个问题时，我想我尝试了所有的方法——最终唯一有帮助的方法是在应用程序的容器div之外创建一个模式窗口（位置：绝对），并将应用程序的容器div设置为display:false；当键盘打开的时候。虽然效果很差，但我测试了所有东西，看看是什么导致了事件，似乎当“焦点事件”冒泡时，每个3d变换都会出错（在闪烁和性能方面）

---

防止冒泡事件完全解决了这个问题——令人难以置信的是，这样一个令人讨厌的bug竟然有这么简单的解决方案？

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

我一直对iPad（以及iPhone）上的惊人闪烁（在css3动画上）感到不安，但在这种情况下，只能在纵向视图中看到）。通过设置以下各项，我能够完全解决所有闪烁的问题：

-webkit-perspective: 0; 

关于正在设置动画的元素。我不知道为什么会这样，但确实如此（在iOS 4.2+、iPad（1和2）和iPhone 4上进行了测试）

---

更新：我刚刚意识到Chrome在将该属性的值设置为1时出现了一个问题。当它为0时工作正常，因此我已经适当地更新了上面的内容。

我仍在寻找任何有用的建议！我可能误解了你的意思，但在这种情况下，我没有使用任何类型的setInterval或setTimeout，我完全依赖CSS转换来制作动画。这些转变在iPad上是硬件加速的。唯一出现在闪烁附近的JavaScript只是简单地添加了一两个类。为了清晰起见，闪烁甚至在键盘启动后很久才会出现

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

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

/*************************************************
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); }
}

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

-webkit-perspective: 0;