PhoneGap——在三星Galaxy Tab 10.1上，键盘会让屏幕变黑并闪烁一段时间

我正在使用HTML5开发移动应用程序&CSS3使用PhoneGap。我的问题是，每当我在三星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平板电脑上测试了这个功能，闪烁的效果就像一个完整的网页一样。我试着添加一些CSS属性建议在这里类似的问题，声称解决，但实际上没有帮助。

值得注意的是，每当我们尝试在文本框中输入任何文本时，黑色闪烁就会发生，而且我目前没有使用CSS3做任何动画/过渡。

解决方案是在android manifest中启用硬件加速。

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

通过GPU启用双缓冲，解决了问题。请注意，此选项仅在Android 3.0+中可用。

这是所有技术人员的背景::)我们最近测试了一个用PhoneGap Android 2封装的jQuery Mobile HTML5应用。到Galaxy tab 10.1。我们看到了一些非常相似的东西，除了我们为应用定义了一个启动画面。我们所看到的是，当输入字段被赋予焦点时，屏幕会瞬间闪起启动屏幕。很烦人!为了验证这是否是同样的问题，为你的PhoneGap应用程序定义一个启动屏幕，看看屏幕是否会闪烁你的图像而不是黑色背景。了解了PhoneGap和Android WebView的一些情况后，以下是我对正在发生的事情的最佳估计:PhoneGap以黑色背景加载主应用程序活动，并在初始窗口中显示启动屏幕(如果有定义)。然后PhoneGap启动WebView并在主窗口顶部打开它。当一个字段被选中时，Android会在基于焦点事件或按键等更新时使该组件失效，并且Android会重新绘制所有内容。所以它重绘WebView后面的主窗口，然后重绘WebView上面的HTML页面内容。由于设备没有正确的双缓冲，你会看到所有这些重绘的丑陋荣耀就在你眼前。

我们已经看到一些Android 2上的Android网页表单出现了严重的故障。我们测试了x手机，这看起来像是另一个小故障，但这次是在运行Honeycomb(3.0)的Galaxy Tab上。

我们曾经尝试使用CSS -webkit-backface-visibility来解决一些手机在过去遇到闪烁的问题，但是这会导致HTML表单出现严重的渲染问题。警告!从理论上讲，这应该是一个可行的解决方案，可以在混合中引入一些双重缓冲，但根据我们的经验，它带来的问题比解决的问题要多。

这要么是Android系统的问题，要么是Phonegap的问题。

如果这是Android的问题，这只能通过对操作系统的软件更新来修复。你可以去一个有文本框的普通网站，点击输入文本来测试一下。如果它闪烁，可能是操作系统的问题。

如果这是Phonegap的问题，可以通过对其进行特定搜索来修复。在google的搜索结果中，我发现了这个:

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

这建议您将-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); 
      }

现场演示

希望能有所帮助

我也有同样的问题，一开始我认为这与应用程序的manifest部分有关。

经过几个小时的解决，这对我来说是有效的。(在手机上测试了一个小时后，仍然没有出现问题。三星galaxy s2，版本4.0.3。对于应用程序，我使用版本2.1)。

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

我只是在html上放了一个背景，现在它工作得很好。如果你尝试这个解决方案，请评论它是否适合你。

编辑:我也有这个css规则，这对它的工作很重要*{-webkit-backface-visibility: hidden;}

如果有人还在寻找这个问题的解决方案，我找到了这个bug的支持票据:http://bugs.dojotoolkit.org/ticket/15365

到今天为止，最好的解决方案包括使用adjustPan Android选项加上scrolllableview的上述子类?(如果你能负担得起为Android创建一个专用的APK>= 3，你也可以添加hardwareAccelerated选项)。这解决了所有的麻烦，除了字段重复在Android 4。当然，如果scrollleview ?在包含文本字段的视图中并不是必需的，用view替换它会更好。

结合前面提到的解决方案(即-webkit-backface-visibility: hidden;和android:hardwareAccelerated="true")，我也尝试了以下任何一个:

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

AndroidManifest.xml

android: windowSoftInputMode = " adjustPan "

MyActivity.java

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

我对这个问题有一个经过验证的解决方案，我也面临同样的问题，但我自己解决了它。首先在body内部创建一个字段并将其隐藏，或者您可以使用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>

我们必须在页面加载时设置这个select字段，这样做肯定会停止闪烁…试试吧，伙计们.....

我在使用三星Galaxy Tab 10.1时也遇到过同样的问题。当我将android版本从3.1升级到4.0.3(使用Cyanogenmod 9.0 nightly build 20120302)并且没有任何代码更改时，问题在我的设备上得到了解决。

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

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

相关内容

最新更新

热门标签：