Root cause of flickering problems of web-based mobile apps?

Question

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:

• Apache Cordova 3.0.5
• Android 4.4.2
• Nexus 7

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.

Answer 1

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.