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

发布于 2024-12-14 05:52:31 字数 1034 浏览 3 评论 0原文

我正在使用 HTML5 和 HTML5 开发移动应用程序。使用 PhoneGap 的 CSS3。我的问题是，每当我触摸在 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 平板电脑上对此进行了测试，闪烁效果与完整的网页一样。我尝试添加此处建议的某些 CSS 属性来解决类似的问题，该问题声称可以解决，但实际上确实有帮助。

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

原文

I am developing mobile apps using HTML5 & CSS3 using PhoneGap. My problem is that whenever I touch a textbox on my webpage running on the Samsung Galaxy Tab 10.1 (Android v3.1), it shows the keyboard but the page goes black for a fraction of second. At times, it flickers for a while showing black background and then restores itself.

I even tried with a simple page with a single input type="text" and it even happens with the same.

Anybody faced a similar issue and have had a fix for it?

Any help is much appreciated.

Thanks.

UPDATE 1:

As I said above, the black flickering even happens with the app containing a simple page with a single text box. Following is the code:

<!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>

I tested this on my Android tablet, and the flickering was as with a full fledged web page.
I tried adding certain CSS attributes suggested here on SO for similar problem which claimed to solve, but did actually help.

It is worth noting that the black flickering is happening whenever we try to enter any text in the textbox, and I am currently not doing any animation(s) / transitions using CSS3.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

弥枳 2024-12-21 05:52:31

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

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

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

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

我们在我们测试过的一些 Android 2.x 手机上发现了 Android Web 表单的严重故障，这看起来像是另一个故障，但这次是在运行 Honeycomb (3.0) 的 Galaxy Tab 上。

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

The solution is to enable hardware-acceleration in the android manifest.

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

This enables double-buffering through the GPU and resolves the problem.
Note that this option is only available in Android 3.0+.

Here's the background for all you techies: :)
We have recently been testing a functional jQuery Mobile HTML5 app wrapped with PhoneGap Android 2.x phones to the Galaxy tab 10.1.
We have seen something very similar, with the exception that we have defined a splash screen for our app.
What we see is that when an input field is given focus, the screen flashes up the splash screen momentarily. Very annoying! To verify if this is the same problem, define a splash screen for your PhoneGap app and see if the screen flahes your image instead of a black background.
Knowing something about what's going on with PhoneGap and the Android WebView, this is my best estimation of what is happening:
PhoneGap loads the main App activity with a black background and displays the splash screen (if defined) in that initial window.
PhoneGap then starts the WebView and opens it on top of the main Window.
When a field is selected, the Android invalidates the component wach time it updates it based on a focus event or keypress, or whatever, and Android redraws everything. So it redraws the main window behind the WebView and then redraws the WebView with the HTML page content on top of it. Since the device is not properly double-buffered, you see all of this redrawing in all its ugly glory right in front of your eyes.

We have seen serious glitches with Android web forms on some Android 2.x phones we have tested, and this looks like yet another glitch, but this time on the Galaxy Tab running Honeycomb (3.0).

We have attempted to use CSS -webkit-backface-visibility to resolve issues on some phones when experiencing flicker in the past - but this has caused serious rendering issues in HTML forms. Be warned! In theory this should be a viable fix to introduce some double-buffering into the mix, but in our experience it causes more problems than it solves.

回复收藏 0 原文

·深蓝 2024-12-21 05:52:31

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

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

如果这是 Phonegap 的问题，则可以通过对此进行特定搜索来修复。看看谷歌的热门结果，我发现了这个：

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

这建议您将 -webkit-backface-visibility: hide; 放入您的代码。虽然我看到您将其放入 html, body 标记中，但请尝试将其放入 * 标记中，例如：

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

注意：链接将样式置于 < code>.x-panel 标记，我不确定这是否特定于他们的代码或 Android。

这是您应该查看修复的另一个链接：http://code.google.com/p/jqtouch/issues/detail?id=301

This is either a problem with the Android OS or Phonegap.

If it's a problem with Android, this can only be fixed with a software update to the OS. You can test this out by going to a regular website with a text box and tapping on it to enter text. If it flickers, it's probably the OS.

If it's a problem with Phonegap, it might be fixed by doing a specific search for that. Looking at the top results in google, I've found this:

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

This suggests you put -webkit-backface-visibility: hidden; into your code. While I see you put it into the html, body tag, try putting it into the * tag, ex:

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

Note: The link puts the style onto a .x-panel tag, I'm not sure if that's specific to their code or to Android.

Here's another link that you should look into for a fix: http://code.google.com/p/jqtouch/issues/detail?id=301

回复收藏 0 原文

萌酱 2024-12-21 05:52:31

我添加了一个演示页面：

http://jsbin.com/upixel/

从您的代码中， 输入很大（宽度和高度需要通过css设置） - 如果是这种情况，黑色可能来自默认点击颜色，闪烁可能来自 >阻塞（音位间隙或脚本的故障）

看看这是否可以解决您的闪烁问题：

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

现场演示

希望它能有所帮助

I added a demo page:

http://jsbin.com/upixel/

From your code, the input is big (width and height need to be set by css) - if that is the case, the black color may come from the default tap color and the flickering may come from blocking (phonegap or script's fault)

see will this solve your flickering:

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

Live Demo

Hope it can help

回复收藏 0 原文

爱给你人给你 2024-12-21 05:52:31

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

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

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

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

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

回复收藏 0 原文

鸢与 2024-12-21 05:52:31

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

截至目前，最好的解决方法是使用 adjustmentPan Android 选项加上上面的 ScrollableView 子类？（如果您有能力创建专用于 Android >= 3 的 APK，您还可以添加 hardwareAccelerated 选项）。这解决了Android 4上除了字段重复之外的所有麻烦。当然，如果ScrollableView？在包含文本字段的视图中并不是真正强制的，将其替换为视图甚至更好。

回复收藏 0 原文

羁拥 2024-12-21 05:52:31

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

仅适用于Android版本> = 3）

< AndroidManifest.xml
android:windowSoftInputMode="adjustPan"

MyActivity.java

this.runOnUiThread(new Runnable() {

    公共无效运行（）{

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

    }

});

In conjunction to the solutions mentioned already (i.e. -webkit-backface-visibility: hidden; and android:hardwareAccelerated="true"), I have also tried either one of the following:

(Applicable only on Android version >= 3)

AndroidManifest.xml
android:windowSoftInputMode="adjustPan"

MyActivity.java

this.runOnUiThread(new Runnable() {

    public void run() {

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

    }

});

回复收藏 0 原文

依靠 2024-12-21 05:52:31

我对这个问题有一个行之有效的解决方案，我也面临着同样的问题，但我自己解决了。
首先在 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>

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

I have a proven solution for this problem, I was also facing same problem but I solved it myself.
First create a field inside body and make it hidden or you can make it hide behind a div using z-index so that it won't be visible.

<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>

The moto is that we have to set this select field when the page load, and doing this will stop the flickering for sure...try it guys.....it worked for me

回复收藏 0 原文