Question

我正在使用HTML5＆amp; amp; CSS3使用PhoneGap。我的问题是每当我触摸在Samsung 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平板电脑上进行了测试，闪烁就像一个完整的网页一样。我尝试在SO上添加某些CSS属性来解决类似的问题，但是确实有所帮助。

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

Answer 1

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

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

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

这是所有技术人员的背景：:) 我们最近一直在测试一个用PhoneGap Android 2.x手机包装的功能性jQuery Mobile HTML5应用程序到Galaxy标签10.1。我们已经看到了非常类似的东西，除了我们为我们的应用程序定义了一个启动画面。我们看到的是，当输入字段被赋予焦点时，屏幕会立即闪烁闪烁屏幕。很烦人！要验证这是否是同一问题，请为PhoneGap应用定义启动画面，并查看屏幕是否为您的图像而不是黑色背景。了解PhoneGap和Android WebView的功能，这是我对最新情况的最佳估计： PhoneGap使用黑色背景加载主App活动，并在该初始窗口中显示启动画面（如果已定义）。 PhoneGap然后启动WebView并在主窗口的顶部打开它。当选择一个字段时，Android会根据焦点事件或按键或其他任何内容使组件无效，并且Android会重新绘制所有内容。因此，它重新绘制WebView后面的主窗口，然后在其上面重新绘制带有HTML页面内容的WebView。由于该设备没有正确的双重缓冲，你可以看到所有这些重绘在你眼前的所有丑陋的荣耀。

我们已经在我们测试的一些Android 2.x手机上看到了Android网络表单的严重故障，这看起来又是一个小故障，但这次是在运行Honeycomb（3.0）的Galaxy Tab上。

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

Answer 2

这可能是Android操作系统或Phonegap的问题。

如果它是Android 的问题，只能通过对操作系统的软件更新来解决。您可以通过带有文本框的常规网站并点击它来输入文本来测试这一点。如果它闪烁，它可能是操作系统。

如果Phonegap 出现问题，可以通过对其进行特定搜索来修复。看看谷歌的最高结果，我发现了这个：

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

Answer 3

我添加了一个演示页：

http://jsbin.com/upixel/

从您的代码中，input很大（宽度和高度需要由css设置） - 如果是这种情况，黑色可能来自默认点按颜色并且闪烁可能来自阻止（手机间隙或脚本的错误）

看到这会解决你的闪烁：

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

Live Demo

希望它可以提供帮助

Answer 4

我遇到了同样的问题，一开始我认为它与应用程序的清单部分有关。

经过几个小时的麻烦，这对我有用。（在手机上测试一小时后仍然没有出现问题。三星Galaxy s2，版本4.0.3。对于应用程序我使用的是verison 2.1）。

html {background：url（img / brownBG.PNG）重复0 0;}

我只是在html上放了一个背景，现在它工作正常。如果您尝试此解决方案，请评论它是否适合您。

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

Answer 5

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

截至今天，最好的解决方法是使用adjustPan Android选项加上ScrollableView的上述子类？（如果您能负担得起创建专用于Android的APK＆gt; = 3，您还可以添加hardwareAccelerated选项）。这解决了除Android 4上的字段复制之外的所有麻烦。当然，如果ScrollableView？在包含文本字段的视图中并不是必需的，用View替换它会更好。

Answer 6

结合已经提到的解决方案（即-webkit-backface-visibility：hidden;和android：hardwareAccelerated =“true”），我还尝试了以下任何一种方法：

（仅适用于Android版＆gt; = 3）

AndroidManifest.xml

机器人：windowSoftInputMode = “adjustPan”

MyActivity.java

this.runOnUiThread(new Runnable() {

    public void run() {

        getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN);

    }

});

Answer 7

我在三星Galaxy Tab 10.1上遇到了和你一样的问题。虽然我将Android版本从3.1升级到4.0.3（使用Cyanogenmod 9.0每晚构建20120302）并且没有任何代码更改，但问题在我的设备上解决了。 / p>

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

Answer 8

对于这个问题，我有一个经过验证的解决方案，我也遇到了同样的问题，但我自己解决了这个问题。首先在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>

moto是我们必须在页面加载时设置这个选择字段，并且这样做肯定会停止闪烁...尝试它们......它对我有用

Answer 9

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

PhoneGap - 键盘使三星Galaxy Tab 10.1上的屏幕变黑并闪烁一段时间

9 个答案: