iPad css3动画在键盘使用后闪烁 [英] iPad css3 animation flickers after keyboard use

问题描述

我正在使用HTML5 / CSS3为iPad开发应用程式。我不使用任何框架，只是使用本机支持的设备上的任何。我已经创建了一些css3动画，以模拟典型的iOS滑动向左或在屏幕之间导航时向右滑动。这里是一个左滑块动画的例子，它利用了iPad的CSS3硬件加速:( ipad运行4.2）。

  / ************************************************ * 
幻灯片左
 ************************************* ********** / 
 .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 HTML5应用程序的例子，后来没有闪烁，但是haven已经变得很多。 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）; / *这有助于闪烁很多。 * / 
} 
  

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

更新1/16 @ 11pm

按匿名建议增加z-index。

$ b更新1/17 @ 8:30 am b

我已在此处发布了此问题的演示。

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

解决方案

真的不是这个问题的修复。它似乎在iPad上的WebKit中的表单元素导致闪烁的问题。

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

I'm developing an app for the iPad using HTML5/CSS3. I'm not using any framework and am just using whatever is natively supported on the device. I have created some css3 animations to emulate the typical iOS sliding left or sliding right when navigating between screens. Here's an example of the slide left animation which is taking advantage of the iPad's CSS3 hardware acceleration: (the ipad is running 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); }
}

I also have this CSS which I've attempted to use to fix the flicker:

.incoming,
.outgoing{
 display: block !important;
 -webkit-backface-visibility: hidden;
}

This works great until the iPad keyboard is used. After which point all the animations flicker severely.

I've been looking for examples of an iPad HTML5 app that uses the keyboard and doesn't have flickers afterwards, but haven't turned up much. The jqTouch demos exhibit the same behavior on the iPad (although I know they were designed for the iPhone).

I've turned up a few posts/questions of similar questions but have never found a good answer. I've been through http://css3animator.com/2010/12/fight-the-flicker-making-your-css3-animation-bomb-proof/ and the articles linked there but haven't had any success.

Any other suggestions?

Update 1/13 @ 9am

I've added this css and it helped a lot:

.incoming *,
.outgoing *{
 -webkit-backface-visibility: hidden;
 -webkit-transform: translate3d(0,0,0); /* This helps with the flicker a lot. */
}

The foreground elements don't seem to flicker anymore, but the backgrounds still do. Still looking for some help or helpful resources on Mobile Safari's memory handling tactics.

Update 1/16 @ 11pm

Increasing the z-index as suggested by anonymous. Didn't seem to make a difference.

Update 1/17 @ 8:30am

I've posted a demo of the problem here.

The transitions between screens work great...until you tap/click inside one of the form fields. After the keyboard slides up and returns, all the transitions flicker. Go to the URL inside the iOS simulator or on an actual iPad to see what I'm talking about.

解决方案

Ultimately, there really wasn't a fix for this issue. It seems like form elements in WebKit on the iPad cause problems with flickering.

My workaround was that on the onblur of each form element, I refreshed the page using hash tags to ensure it refreshed to the exact same state. It still caused a "flicker" while it was refreshing, but it did keep the screen from flickering throughout the rest of the app.

这篇关于iPad css3动画在键盘使用后闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！