Mah*_*iya 15 html5 android mobile-safari css3 cordova
我正在使用PhoneGap使用HTML5和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>
Run Code Online (Sandbox Code Playgroud)
我在我的Android平板电脑上进行了测试,闪烁就像一个完整的网页一样.我尝试在SO上添加某些CSS属性,因为类似的问题声称可以解决,但确实有帮助.
值得注意的是,每当我们尝试在文本框中输入任何文本时都会发生黑色闪烁,而且我目前没有使用CSS3进行任何动画/过渡.
解决方案是在Android清单中启用硬件加速.
<application android:hardwareAccelerated="true" ... />
Run Code Online (Sandbox Code Playgroud)
这样可以通过GPU实现双缓冲并解决问题.请注意,此选项仅适用于Android 3.0及更高版本.
这是所有技术人员的背景::)我们最近一直在测试一个功能齐全的jQuery Mobile HTML5应用程序,该应用程序包含PhoneGap Android 2.x手机到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表单中出现严重的渲染问题.被警告!从理论上讲,这应该是一个可行的解决方案,可以在混合中引入一些双缓冲,但根据我们的经验,它会导致比它解决的问题更多的问题.
这可能是 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;
}
Run Code Online (Sandbox Code Playgroud)
注意:该链接将样式放在.x-panel标签上,我不确定这是否特定于他们的代码或 Android。
您应该查看以下另一个链接来进行修复:http://code.google.com/p/jqtouch/issues/detail?id =301