Menu
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.
594
If your screen is still flickering, try adjusting your brightness settings, and disabling the adaptive brightness feature. Corrupted data in the system on your device can sometimes cause the screen to flicker. Clear the cache on your device, then check if the flickering continues.
Check brightness settings. Go to Settings > Display > Adaptive brightness and toggle it off. The screen flickering could be due to this setting interacting with your lighting situation. Disable any blue light filter apps you have installed as they could be the cause of your phone's screen glitches.
1 Hold down the Volume Down Key and the Power Button simultaneously for 7 seconds. 2 Your device will restart and display the Samsung logo. Clearing your phone's cache can also help to stop the phone screen from flickering or blinking. From Settings, tap Device Care.
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.
150
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
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
