I just create a simple Apache Cordova app based on jqTouch und Zepto.
The app has 3 pages, one contains one form of 4 controls, the other pages 3 navigational elements and a few lines of text.
Using the jqTouch's apple
and jqtouch
themes, the app shows enormous amounts of flickering. During a page transition, certain parts of the screen render black.
jqTouch's innsbruck
theme has a bit less flickering, but still is by no means ready to production.
The test-app doesn't use add-on javaScript. All navigation is done using #pageName links. Thus, user supplied JavaScript might be no problem here.
Interestingly: If I open the jqTouch demos using the built-in mobile browser, these execute with much less flickering.
Since the app is very simple - it not even uses additional styles or images -, I wonder what the root cause of these rendering problems is.
Tested using this environment:
Appcelerator Titanium - Poor too
Additionally, I gave Appcelerator Titanium a try using the rss example. Using the test device, the performance was poor too.
Appcelerator claims to compile to native. But due to poor performance, I guess they compile to WebViews too.
Do they? Or does Appcelerator Titanium compiles views and controllers to pure JavaCode?
Next try
Next, I'm going to give Xamarin a try.
First, the native browser will be more efficient than your Cordova app.
Cordova uses a webview, which is less powerfull.
That aside, the flickering issue you're seeing is fixable by rendering the element on the GPU.
Via CSS you can specify :
transform-style: preserve-3d;
or
transform: translate3d(0,0,0);
With needed vendor prefixes.
This will force your element to be rendered by the GPU. And will fix your flickering issue, but you must target your faulty element.