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

【问题标题】：PhoneGap - Keyboard makes the screen go black and flickery for some time on Samsung Galaxy Tab 10.1PhoneGap - 键盘使三星 Galaxy Tab 10.1 上的屏幕变黑并闪烁一段时间
【发布时间】：2011-11-08 04:42:52
【问题描述】：

我正在使用 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 平板电脑上对此进行了测试，闪烁就像一个完整的网页一样。我尝试在 SO 上添加此处建议的某些 CSS 属性，以解决声称可以解决但实际上有所帮助的类似问题。

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

【问题讨论】：

这是在哪个平台上运行的，这只发生在android上吗？
行为是否与多台平板电脑一致还是只有一台？
我在三星 Galaxy Tab 10.1.. (Android V3.1) 上测试它
示例代码很高兴看到，您可以编辑您的问题或使用jsfiddle.net
@PhillPafford：我添加了示例代码，您可能想尝试一下！

标签： android html css cordova mobile-safari

【解决方案1】：

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

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

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

这里是所有技术人员的背景：:) 我们最近一直在测试一个功能性 jQuery Mobile HTML5 应用程序，该应用程序使用 PhoneGap Android 2.x 手机封装到 Galaxy tab 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 表单出现严重的渲染问题时间>。被警告！从理论上讲，这应该是在混合中引入一些双缓冲的可行解决方案，但根据我们的经验，它导致的问题多于解决的问题。

【讨论】：

嘿，您对 SplashScreen 的看法是正确的。甚至我在我的成熟应用程序中也看到了 jQuery Mobile 的这个问题。它也出现在页面转换之间..

【解决方案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

【讨论】：

嗨，*{ -webkit-backface-visibility: hidden; } 没有解决问题。个人认为这不是安卓操作系统的问题，因为在iOS平台上也发现了类似的问题。我相信会有一些 CSS / HTML hack 可以解决这个问题......
对问题进行 google 特定的 google 搜索。我无法复制它，因为我没有您的应用或 Android 操作系统。
@mahi：我刚刚弹出了your example code up on my website，并在运行 iOS 5.0.1 的 iPad 1 上对其进行了测试。当我点击文本字段时，屏幕不会变黑，也不会闪烁。我没有 Galaxy Tab，所以无法在那里进行测试。您能否在 Galaxy Tab 上查看我的测试页面，看看您是否遇到了问题？
@mahi：啊，我网站的测试页面当然不涉及PhoneGap。嗯。
@mahi：但如果您使用我的测试页面在 Galaxy Tab 上看到同样的问题，那么至少可以消除 PhoneGap。（如果你不这样做，我猜这是 PhoneGap 的问题。）

【解决方案3】：

我添加了一个演示页面：

http://jsbin.com/upixel/

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

看看这能解决你的闪烁问题吗：

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

Live Demo

希望对你有帮助

【讨论】：

不，使用我的 PhoneGap 应用程序的 CSS 中的代码仍然显示相同的行为...
您是否尝试将演示页面代码放入 blank phonegap 项目中？由于环境不同，我们需要排除其他脚本因素才能找到原因。
是的，我将页面复制到了new phonegap 项目中，该项目不包含任何其他CSS 或other 代码。
似乎这是由 phonegap js/css 问题引起的（他们可能会在 :focus 上做一些事情......这是有问题的）......报告给 phonegap 看看他们可以提供任何帮助。
当然，我会在 PhoneGap 用户组上报告这个。希望一些PhoneGap员工/专家看看这个问题，如果它来自他们的最终:-)

【解决方案4】：

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

经过数小时的故障解决后，这对我有用。（在手机上测试一个小时后仍然没有出现问题。三星galaxy s2，版本4.0.3。对于应用程序，我使用的是版本2.1）。

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

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

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

【讨论】：

我相信img/brownBG.PNG 是您的自定义图像... 是不是可以在大多数设备上使用的通用背景图像？如果是的话，你能把图片的链接发给我下载，这样我就可以试试了吗？谢谢。
这只是我在 Photoshop 中制作的图像，如果我的解决方案按我认为的方式工作，你可以使用任何背景：;背景图像或背景颜色。我使用的 bg 的链接。 github.com/antpant89/Sharing/blob/master/brownBG.PNG

【解决方案5】：

如果有人仍在寻找解决方案，我找到了此错误的支持票： http://bugs.dojotoolkit.org/ticket/15365

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

【讨论】：

【解决方案6】：

结合已经提到的解决方案（即 -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);

    }

});

【讨论】：

【解决方案7】：

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

问题是我们必须在页面加载时设置这个选择字段，这样做肯定会停止闪烁......试试吧伙计......它对我有用

【讨论】：

【解决方案8】：

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

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

【讨论】：

【解决方案9】：

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

【讨论】：

是的，我的 AndroidManifest.xml 文件中有它。
哦，好吧，这是在黑暗中拍摄的。希望你能明白。