PhoneGap – 键盘使屏幕变黑和闪烁一段时间三星Galaxy Tab 10.1

我正在使用PhoneGap使用HTML5和CSS3开发移动应用程序。 我的问题是,只要我触摸运行在三星Galaxy Tab 10.1(Android v3.1)上的网页上的文本框,它显示键盘,但页面黑色的几分之一秒。 有时,它会闪烁一段时间显示黑色背景,然后恢复自己。

我什至用一个单一的input type="text"简单的页面尝试,甚至发生相同的。

任何人都面临类似的问题,并已经得到了解决?

任何帮助深表感谢。

谢谢。

更新1:

正如我上面所说,黑色闪烁甚至发生在包含一个简单的页面和一个文本框的应用程序。 以下是代码:

 <!DOCTYPE html> <html> <head> <title> Flickering Problem </title> <style> html, body{ -webkit-backface-visibility: hidden; overflow: hidden; -webkit-transform: translate3d(0,0,0); } </style> </head> <body> <input type="text" width="200px" height="100px" /> </body> </html> 

我在我的Android平板电脑上testing了这个,闪烁的是一个完整的网页。 我尝试在SO上添加一些CSS属性,用于解决类似的问题,但确实有帮助。

值得注意的是,当我们尝试在文本框中input任何文本时,黑色闪烁就会发生,而我目前没有使用CSS3进行任何animation/转换。

Solutions Collecting From Web of "PhoneGap – 键盘使屏幕变黑和闪烁一段时间三星Galaxy Tab 10.1"

解决scheme是在Android清单中启用硬件加速。

 <application android:hardwareAccelerated="true" ... /> 

这可以通过GPU实现双缓冲并解决问题。 请注意,此选项仅适用于Android 3.0+。

这里是所有技术人员的背景:我们最近已经testing了一个包含PhoneGap Android 2.x手机function的jQuery Mobile HTML5应用程序到Galaxy选项卡10.1。 我们已经看到了非常相似的东西,除了我们已经定义了我们的应用程序的启animation面。 我们所看到的是,当一个input字段被赋予焦点时,屏幕瞬间闪现闪屏。 很烦人! 要validation这是否是相同的问题,为您的PhoneGap应用程序定义一个启animation面,并查看屏幕是否闪烁您的图像,而不是黑色的背景。 了解了有关PhoneGap和Android WebView发生了什么的事情,这是我对发生的事情的最佳估计:PhoneGap会以黑色背景加载主要App活动,并在初始窗口中显示启animation面(如果已定义)。 然后,PhoneGap启动WebView,并在主窗口上打开它。 当select一个字段时,Android会根据焦点事件或按键或其他任何方式使组件无效化,然后Android重新绘制所有内容。 因此,它重绘了WebView后面的主窗口,然后在WebView上重新绘制了带有HTML页面内容的WebView。 由于该设备没有适当的双重缓冲,你可以看到所有这一切在你的眼前的所有丑陋的荣耀重绘。

我们已经在我们testing过的一些Android 2.x手机上看到了严重的Android Web表单故障,这看起来像是另一个小故障,但是这一次在运行Honeycomb(3.0)的Galaxy Tab上。

我们已经尝试过使用CSS -webkit-backface-visibility来解决某些手机在过去遇到闪烁时的问题,但是这导致了HTML表单中的严重呈现问题 。 被警告! 从理论上讲,这应该是一个可行的解决scheme,以引入一些双缓冲混合,但根据我们的经验,它会导致更多的问题比它解决。

这是Android OS或Phonegap的问题。

如果这是Android的问题 ,则只能通过对操作系统的软件更新来修复。 你可以通过一个带有文本框的常规网站并点击文本input来testing。 如果它闪烁,可能是操作系统。

如果这是Phonegap的问题 ,可以通过对此进行特定search来解决。 在谷歌顶部的结果看,我发现这一点:

http://www.senchatouchbits.com/6/fixing-flickering-of-animations-in-phonegap.html

这build议你把-webkit-backface-visibility: hidden; 进入你的代码。 虽然我看到你把它放在html, body标记,尝试把它放在*标记,例如:

 *{ -webkit-backface-visibility: hidden; } 

注意:链接将样式放到.x-panel标签上,我不确定这是特定于其代码还是Android。

这里有另一个链接,你应该考虑修复: http : //code.google.com/p/jqtouch/issues/detail?id=301

我添加了一个演示页面:

http://jsbin.com/upixel/

从你的代码, input是大的(宽度和高度需要由CSS设置) – 如果是这样的话,黑色可能来自默认的色调和闪烁可能来自阻塞 (phonegap或脚本的错误)

看看这会解决你的闪烁:

  * { -webkit-tap-highlight-color: rgba(0,0,0,0); } 

现场演示

希望它可以帮助

我有同样的问题,并在一开始我认为这与应用程序的明显部分。

麻烦几个小时后,这是对我有用。 (在电话testing一个小时后仍然没有问题,一个samsung galaxy s2,版本4.0.3,而对于应用程序,我使用的是版本2.1)。

html {background:url(img / brownBG.PNG)repeat 0 0;}

我只是把一个背景的HTML,现在它工作正常。 如果你尝试这个解决scheme,请评论它是否适合你。

编辑:我也有这个CSS的规则,这是重要的工作* { – webkit背面知名度:隐藏;}

如果有人仍然在寻找解决scheme,我find了这个bug的支持票: http : //bugs.dojotoolkit.org/ticket/15365

到目前为止,最好的解决方法是使用adjustPan Android选项加上上面的ScrollableView的子类? (如果您可以负担创build专用于Android> = 3的APK,则还可以添加hardwareAccelerated选项)。 这解决了所有的问题,除了在Android 4上的字段重复。当然,如果ScrollableView? 在包含文本字段的视图中并不是强制的,用View替代它甚至更好。

结合已经提到的解决scheme(即-webkit-backface-visibility:hidden;和android:hardwareAccelerated =“true”),我也尝试了以下两种方法之一:

(仅适用于Android版本> = 3)

  1. AndroidManifest.xml中

    机器人:windowSoftInputMode = “adjustPan”

  2. MyActivity.java

     this.runOnUiThread(new Runnable() { public void run() { getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN); } }); 

我对这个问题有一个可靠的解决scheme,我也面临同样的问题,但我自己解决了。 首先在body内部创build一个字段并隐藏它,或者你可以使用z-index将它隐藏在div的后面,这样它就不可见了。

 <script> $(document).ready(function() { document.getElementById('example').value=''; }); </script> <body> <div style='z-index:50;position:absolute;height:100%;width:100%;'> Your page matter here</div> <select id='example' style='z-index:10'> <option value=''>a</option> </select></pre> </body> 

moto是我们必须设置这个select字段时,页面加载,这样做将停止闪烁肯定…尝试它的家伙…..它为我工作

我在Samsung Galaxy Tab 10.1上遇到了和你一样的问题。虽然我将Android版本从3.1升级到了4.0.3(使用Cyanogenmod 9.0 nightly build 20120302),并且没有任何代码更改,但问题在我的设备上得到了解决。

所以我想这是Galaxy Tab android版本的webview组件的问题。

我不能说这会解决你的问题,但值得一试。 检查您的AndroidManifest.xml文件中的android:configChanges="orientation|keyboardHidden"activity标签(在应用程序下)。